JavaScript to accept only numbers between 0 to 255 range - Stack Overflow

admin管理员组

文章数量:1345090

My Requirement is to validate the ip ranges, I need to create a JavaScript function to accept only numeric and it must allow only between the range 0 to 255. If anything is entered beyond that it must alert a message.

I am currently using this below function

<script language="JavaScript"> 

function allownums(a) 
{ 

if(a <48 ||a > 57) 
alert("invalid") 
else 
alert("vaild") 
} 

</script> 
<input type='text' id='numonly' onkeypress='allownums(event.keycode)'> 

I am new to JavaScript, Need some experts suggestion to fix my requirement. Please suggest me

Thanks Sudhir

My Requirement is to validate the ip ranges, I need to create a JavaScript function to accept only numeric and it must allow only between the range 0 to 255. If anything is entered beyond that it must alert a message.

I am currently using this below function

<script language="JavaScript"> 

function allownums(a) 
{ 

if(a <48 ||a > 57) 
alert("invalid") 
else 
alert("vaild") 
} 

</script> 
<input type='text' id='numonly' onkeypress='allownums(event.keycode)'> 

I am new to JavaScript, Need some experts suggestion to fix my requirement. Please suggest me

Thanks Sudhir

• javascript

Share Improve this question Follow edited Nov 16, 2012 at 9:09 Peeyush Kushwaha 3,62388 gold badges3838 silver badges7575 bronze badges asked Nov 16, 2012 at 8:58 SudhirSudhir 2111 gold badge22 silver badges77 bronze badges 5

• It appears you're validating the key being pressed. I believe you need to validate the value of the input field. – DA. Commented Nov 16, 2012 at 9:03
• possible duplicate stackoverflow./questions/4858949/… – Smita Commented Nov 16, 2012 at 9:05
• @JamWaffles: Javascript is the kind of language/system you learn this way; copy, paste, adapt. It is so ubiquitous and so immediate that it will be the first language for a great many people, and they will do it incrementally, an if statement here and a window.alert('oh noes') there. That may sound like a bad thing, but it actually just adds a whole raft of potential programmers for whom the learning curve was too steep before, or the barrier to entry too high. – Phil H Commented Nov 16, 2012 at 9:59
• @Phil Yes, but instead of asking "How do I do this" on SO for every thing the learner gets stuck on, they should try to learn from other resources that are designed for learning from, not solving a problem. I've seen a certain user do the former a lot. – Bojangles Commented Nov 16, 2012 at 10:05
• 1 @JamWaffles: True. Interesting profile for that user, the questions they ask seem to get a lot of upvotes, so perhaps they are doing a good job of asking questions that others find in their own search. It does seem like a rather skewed balance, though... – Phil H Commented Nov 16, 2012 at 14:18

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

Currently you have the test

(a < 48) || (a > 57)

for invalid values. So I would change those:

(a < 0 ) || (a > 255)

You may also need to consider what you'll do with non-integral input like 2.3 - either round it or treat it as invalid.

At present, as Kelvin Mackay points out, you are performing the validation on the keypress event rather than the input value, so change the onkeypress to allownums(this.value).

I would advise changing the alert to a warning in a div, and using the validation to enable/disable a submit button, as popups are quite annoying in just about every circumstance.

To clear the input when an invalid entry is made (as requested in a ment) would make it rather annoying for the user; as soon as a key is pressed to add a digit and make the input invalid, the whole input is cleared. The code, however, would be:

if(!validnum(this.value)) 
    this.value="";

in the input tag, thus:

<input type='text' id='numonly' 
      onkeyup='if(!validnum(this.value)) this.value="";'>

with the function changed to:

function validnum(a) { 
    if(a < 0 || a > 255) 
        return false;
    else 
        return true;
} 

or more succinctly:

function validnum(a) {
    return ((a >= 0) && (a <= 255));
}

Edit: To alert and clear the box, if you must:

function validOrPunchTheUser(inputElement) {
    if(!validnum(inputElement.value)) {
        window.alert('badness'); // punch the user
        inputElement.value = ""; // take away their things
    }
}

<input type='text' id='numonly' 
      onkeyup='validOrPunchTheUser(this)'>

However, reading other answers, apparently you are looking to validate an octet (e.g. in an IP address). If so, please state that in the question, as it passed me by today. For an octet:

function validateIPKeyPress(event) {
    var key = event.keyCode;
    var currentvalue = event.target.value;
    if(key < 96 || key > 105)
    {
        event.preventDefault();
        window.alert('pain');
        return false;
    }
    else if(currentvalue.length > 2 ||
            (currentvalue.length == 2 &&
             key > 101)) {
        window.alert('of death');
        event.preventDefault();
        event.target.value = event.target.value.substring(0,2);
    }
    else
        return true;
}

With the input tag:

<input type='text' id='octet'
          onkeydown='validateIPKeyPress(event)'>

Except please don't use alerts. If you take out the alert lines, it will silently prevent invalid inputs. Note the change to use onkeydown now, so that we can catch invalid key presses and prevent the value changing at all. If you must clear the input, then do if(!validateIPKeyPress(event)) this.value = "";.

I would rather go instantly for validation of whole ip address. Allowing input both numbers and dots, parsing them thru REGEX pattern.

Pattern usage example you could fetch here: http://www.darian-brown./validate-ip-addresses-javascript-and-php-example/

The code itself would look something like:

<input type='text' id='numonly' value="" onkeypress='allowIp(event)' onkeyup='javascript:checkIp()'>

function allowIp(e){
if((e.keyCode < 48 || e.keyCode > 57) && e.keyCode != 46)  // both nubmer range and period allowed, otherwise prevent.
  { 
      e.preventDefault();
  }
}

function checkIp() 
{ 
  var ip = $("#numonly").val();

    /* The regular expression pattern */
  var pattern = new RegExp("^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");

  /* use  javascript's test() function to execute the regular expression and then store the result - which is either true or false */
  var bValidIP = pattern.test(ip);

  if(bValidIP){
     // IP has ok pattern
     $("#numonly").css("background", "green");
  }
  else {
     $("#numonly").css("background", "red");
  }
}

You could check it here on fiddle http://jsfiddle/Indias/P3Uwg/

Single Integer

You can use the following solution to check if the user input for a single integer is between 0 - 255:

document.getElementById('example').addEventListener('input', event => {
  const input = event.target.value;
  console.log(/^\d+$/.test(input) && input > -1 && input < 256);
});

<input id="example" type="text" placeholder="Enter single integer" />

---

IP Address

Alternatively, you can use the code below to verify that each section of an IP address is between 0 - 255:

document.getElementById('example').addEventListener('input', event => {
  const input = event.target.value;
  console.log(input === new Uint8ClampedArray(input.split('.')).join('.'));
});

<input id="example" type="text" placeholder="Enter IP address" />

You need to validate the current value of the input, rather than the last key that was pressed:

<input type='text' id='numonly' onkeypress='allownums(this.value)'> 

Your function then just needs to be modified to: if(a < 0 || a > 255)

A function like this should do it:

function allownums(value){
   var num = parseInt(value,10);
   if(num <0 || num>255)
      alert('invalid')      
}

Then have your html look like:

<input type='text' id='numonly' onblur='allownums(this.value)'> 

Live example: http://jsfiddle/USL3E/

Update
I've set up a fiddle that does some basic IP-formatting and checks weather or not all input is in range (0 - 255) etc... feel free to use it, improve it, study it... I've also updated the code snippet here to match the fiddle

There are several things you're not taking into account. First and foremost is that not all browsers have a keycode property set on the event objects. You're better off passing the entire event object to the function, and deal with X-browser issues there.
Secondly, you're checking key after key, but at no point are you checking the actual value that your input field is getting. There are a few more things, like the use of the onkeypress html attribute (which I don't really like to see used), and the undefined return value, but that would take us a little too far... here's what I suggest - HTML:

<input type='text' id='numonly' onkeypress='allowNums(event)'>

JS:

function allowNums(e)
{
    var key = e.keycode || e.which;//X-browser
    var allow = '.0123456789';//string the allowed chars:
    var matches,element = e.target || e.srcElement;
    if (String.fromCharCode(key).length === 0)
    {
        return e;
    }
    if (allow.indexOf(String.fromCharCode(key)) === 0)
    {//dot
        element.value = element.value.replace(/[0-9]+$/,function(group)
        {
            return ('000' + group).substr(-3);
        });
        return e;
    }
    if (allow.indexOf(String.fromCharCode(key)) > -1)
    {
        matches = (element.value.replace(/\./g) + String.fromCharCode(key)).match(/[0-9]{1,3}/g);
        if (+(matches[matches.length -1]) <= 255)
        {
            element.value = matches.join('.');
        }
    }
    e.returnValue = false;
    e.cancelBubble = true;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
}​

Now this code still needs a lot of work, this is just to get you going, and hopefully encourage you to look into the event object, how JS event handlers work and all the rest. BTW, since you're new to JS, this site is worth a bookmark

    function fun_key()
    {
    var key=event.keyCode;
    if(key>=48 && key<=57)
    {
    return true;
    }
    else
    {
    return false;
    alert("please enter only number");
    }
    }

    and you can call this function on keypress event like:
    <asp:textbox id="txtphonenumber" runat="server" onkeypress="return fun_key()">                </asp"textbox>

I've seen many answers that have overlooked two important factors that may fail to validate range number on keypress:

1. When the value in input textbox is NOT SELECTED, the real oute should be (input.value * 10) + parseInt(e.key) and not simply input.value + parseInt(e.key). It should be * 10 because you add one more digit at the back during keypress, e.g. 10 bees 109.
2. When the value in input textbox IS SELECTED, you can simply check if Number.isInteger(parseInt(e.key)) because when 255 is selected, pressing 9 will not turn into 2559 but 9 instead.

So first of all, write a simple function that check if the input value is selected by the user:

function isTextSelected (input) {
    if (!input instanceof HTMLInputElement) {
        throw new Error("Invalid argument type: 'input'. Object type must be HTMLInputElement.");
    };
    return document.getSelection().toString() != "" && input === document.activeElement;
}

Next, this will be your on keypress event handler that takes into consideration of the above two factors:

$("input[type='number']").on("keypress", function (e) {
     if (!Number.isInteger(parseInt(e.key)) || (($(this).val() * 10) + parseInt(e.key) > 255 
         && !isTextSelected($(this)[0]))) {
         e.preventDefault();
     };
});

Take note of this condition within another brackets, it is one whole condition by itself:

(($(this).val() * 10) + parseInt(e.key) > 255 && !isTextSelected($(this)[0]))

For the < 0 condition, you don't even need it here because the negative sign (-) will be automatically prevented as the sign itself is not an integer.

KNOWN ISSUE: The above solution, however, does not solve the situation when the user move the cursor to the start position of 29 and press 1, which will bee 129. This is because 29 * 10 = 290, which already exceed 255, preventing user from entering 129, which is valid. The start position is particularly hard to track when the input type="number". But it should be enough to resolve the normal way of input for an integer range field. Any other better solutions are wele.

本文标签： JavaScript to accept only numbers between 0 to 255 rangeStack Overflow