The IP validation feature in the textbox is not performing as anticipated

My goal is to have a textbox that receives an IP address and validates it before submission. To achieve this, I've developed a JavaScript class called `validityCheck`.

In my main Vue.js component, I aim to utilize this class to validate the input's format as a correct IP address.

Although currently the validation process does not execute any actions. How can I implement this validation here?

Below is the code for the validity check class:

const validations = '^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';

function validationInput(input) {
  if (validations.test(input)) {
    return false;
  }
  return true;
}
export default validationInput;

Here is the main component structure:

<TextBox :label="$t('ChangeServerIpAddress')" v-model="ipAddress" @input="validationInput" />
<p v-if="false">IP address is not valid</p>

Answer №1

When dealing with string literals, single quotes ' are typically used. It's worth noting that strings do not have a test method. If you encounter an issue, check your console for errors:

const validations = '^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';

function validationInput(input) {
  return validations.test(input);
}

console.log(validationInput('127.0.0.1'));

If you want to use a regular expression literal, make sure to enclose the expression in forward slashes instead of quotes.

const validations = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

function validationInput(input) {
  return validations.test(input);
}

console.log(validationInput('127.0.0.1'));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

encoding the special character "ü" in json_encode as either 'ü' or '&#

I've developed a function that extracts the title from a given URL and returns it in JSON format. The function is invoked by an AJAX call. Everything works smoothly, but when a title contains characters like ü or any related ones, it returns null. Wh ...

Tips for restricting camera movement in threejs

Being new to working with threejs, I am struggling to set limits on the camera position within my scene. When using OrbitControls, I noticed that there are no restrictions on how far I can zoom in or out, which I would like to change. Ideally, I want the c ...

Redux repeatedly triggers re-rendering despite the absence of any changes in the state

This is my first venture into React-Redux projects. I was under the impression that React only re-renders when a component's state changes. However, I am currently facing confusion. The component is being re-rendered every 1 to 3 seconds even thoug ...

Generate various shapes using a loop

Hello, I'm currently working on creating multiple forms using a loop that is generated from dynamic elements fetched from the database. However, I believe there might be some issues in my approach. Below is what I have tried so far. While it works to ...

Tips for successfully passing a parameter to the --world-parameters or npm run command for it to be utilized by scripts within the package

Although there are similar questions already asked, I still have a specific scenario that I need help with: In the example I am working on, I am using this repository and I have a script block in my package.json as follows: I want to be able to pass a pa ...

Removing unexpected keys during validation using Joi

Within my server-side JavaScript code, I am utilizing Joi for validating a JavaScript object. The schema being used is structured as follows: var schema = Joi.object().keys({ displayName: Joi.string().required(), email: Joi.string().email(), e ...

Using $window.print() in angularjs results in the print preview displaying an empty page

Encountering a strange issue where using $window.print in angularjs results in only the date, page name, page number, and url appearing on the printed page. The rest of the content is missing even though the original page has plenty of it. I suspect the p ...

Unable to receive comment reply through Ajax without refreshing the comment section

I'm facing an issue where I cannot retrieve comment replies via Ajax under comments, even though the replies are successfully saved in the database. Oddly enough, upon refreshing the Index.php page, the replies display correctly. I suspect the problem ...

An issue has been encountered in the code during the installation of react.js

node:internal/modules/cjs/loader:1148 throw err; ^ Error: Module 'C:\Users\hp\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js' could not be found. at Module._resolveFilename (node:internal ...

Initially, calling angular.element(..).scope() will return undefined

I have encountered an issue where I am unable to access my angular controller's scope outside of the controller. This problem arises when using an external JavaScript library that performs certain actions and executes callbacks upon completion. In one ...

Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

In the comment section, there is a link called "Reply" that triggers a pop-up comment box when clicked. However, I want the comment box to disappear if the "reply" button is clicked again, as it currently keeps opening more comment boxes. $('.replyli ...

The enigma of HTML forms never ceases to baffle

Currently, I am enrolled in a Vue.js course and have recently delved into the topic of forms and their management. The concept posed about how the < select > tag operates has left me puzzled. Is it correct to assume that its value corresponds to the ...

Issue with AngularJS factory $http.get request receiving HTML files as response

Could someone please explain why I keep receiving an HTML file as a return from my Angular factory? This is the route on my backend: function ensureAuthenticated(req, res, next) { if (!req.headers.authorization) { return res.status(401).send({ mess ...

Discover the nearest locations along your route using Google Maps API V3's boundary feature

I am trying to find locations that fall within a specific boundary along a route. I need the results to be ordered by distance from the route. I attempted to use rankby=distance in my Nearby Search request, but it didn't work because it requires a lo ...

JavaScript Object-Oriented Programming - Accessor method that retrieves a property from the parent

Having trouble with implementing getters and setters for model objects in Angular. Facing an error: TypeError: Cannot read property 'firstName' of undefined at User.firstName (http://run.plnkr.co/AvdF2lngjKB76oUe/app.js:35:32) The code snippet: ...

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

When working with the Slide Toggle in Material Design, I noticed that it does not have a stopPropagation event. This is because the "MdSlideToggle.prototype._onChangeEvent" already includes a call to stopPropagation. So, what should be used instead? <m ...

Making Cross-Origin Requests using jQuery's Ajax function and PHP

I've attempted numerous times to make this function properly, but for some reason, I just can't seem to figure it out. Initially, everything was working flawlessly for a few requests, and then out of the blue, it stopped functioning. Below is t ...

Combining and restructuring multidimensional arrays in Javascript: A step-by-step guide

I'm struggling with transforming a multidimensional array in JavaScript. Here is an example of the input array: [ [['a',1],['b',2],['c',3]], [['a',4],['d',2],['c',3],['x',5]], [[&a ...

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Encountering issues with submitting file through ajax. Despite following instructions from various sources, the formdata does not seem to contain the file resulting in an 'undefined index 'image'' error. <form enctype: 'multip ...

The jQuery dropdown selection for only displaying the month and year is not functioning properly when using the select

Currently, I am utilizing a datepicker with only the month and year as options to select from using dropdowns. However, when I apply the following CSS to disable the days of the datepicker, it ends up affecting all datepickers in my JSP file. 1. Is there ...