Add delete and arrow key into Regular Expression

问题:

I am performing date validation and now I am doing that user can only enter numbers ,/and backspace so now I want to add 2 more keys into my regular expression. I want to add delete and arrow keys so what will change I should do in my Regular Expression .This is my code

<input type="text" id="date" name="date" onkeypress="check(event,this);"  /> 

this is me Javascript code

<script type="text/javascript">  function check(evt, id) {   var value = id.value;   var theEvent = evt || window.event;  var key = theEvent.keyCode || theEvent.which;  key = String.fromCharCode( key );   var regex = /[0-9|\b|/]/;   if( !regex.test(key))   {   theEvent.returnValue = false;    if(theEvent.preventDefault)     theEvent.preventDefault();  }    }    </script> 

Thanks waiting for your help.

回答1:

You can skip the input validation if arrow, delete and backspace keys were pressed

function check(evt, id) {   var value = id.value;   var theEvent = evt || window.event;  var key = theEvent.keyCode || theEvent.which;   // Don't validate the input if below arrow, delete and backspace keys were pressed   if(key == 37 || key == 38 || key == 39 || key == 40 || key == 8 || key == 46) { // Left / Up / Right / Down Arrow, Backspace, Delete keys      return;  }   key = String.fromCharCode( key );  var regex = /[0-9|/]/;   if( !regex.test(key))   {   theEvent.returnValue = false;    if(theEvent.preventDefault)     theEvent.preventDefault();  }    } 

回答2:

you should use on change and force change onkeyup to check the current value.

mistakes you have:

1- your regex should be the inverse, your current one checks if the value contains any of these but you want your value to not have other value.

2- you should escape the slash (/) character like this \/ so that it won't be assumed as the end of regex and the rest becomes modifiers!

Example:

document.getElementById('date').onchange = function(){   var regex = /[^\d\/]/g;   if(regex.test(this.value)) {console.log(false); return false;}   else {console.log(true); return true;} };  document.getElementById('date').onkeyup = function(){   this.onchange(); }; 

DEMO

note: make sure you validate the whole date as dd/mm/yyyy or whatever your format is, right before sumission

回答3:

Why don't you just check the actual value of the element, rather than the keypresses which create the value?

You can use the oninput event for that.

文章来源: Add delete and arrow key into Regular Expression