Javascript输入字段验证（仅数字）

Question

我想让我的输入元素只接受数字。 我想实时验证它，并在输入不等于10位数字时将标签的颜色变为红色。

请帮助我的js条件。 谢谢。

 function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) { document.getElementById("lbltest").style.color = "red" return false; } else { document.getElementById("lbltest").style.color = "green" return true; } } 

 <label id="lbltest">Test</label> <input name="txtTry" type="text" pattern=".{10,}" minlength="10" maxlength="10" onkeypress="return isNumberKey(event)"> 

Answer 1

 var input=document.getElementById('input'), label=document.getElementById('lbltest'); input.oninput=function(){ var value=this.value; var isnum = /^\\d+$/.test(value); if(isnum && value.length===10){ label.style.color="green"; }else{ label.style.color="red"; } } 

 <label id="lbltest">Test </label> <input id="input" name="txtTry" type="text" minlength="10" maxlength="10"> 

Answer 2

由于使用jQuery使事件处理变得容易一些，因此我集成了该库来解决该问题。 我保留了您可以根据需要使用或删除的元素属性。

 $(document).ready(function() { $('.validate').on('input', function(event) { var $element = $(this); var valid = true; if ($element.attr('pattern')) { var pattern = new RegExp($element.attr('pattern')); valid = valid && pattern.test($element.val()); } if ($element.attr('minlength')) { value = valid && $element.val().length >= $element.attr('minlength'); } if ($element.attr('maxlength')) { value = valid && $element.val().length <= $element.attr('maxlength'); } if (!valid) { $element.addClass('validation-error'); } else { $element.removeClass('validation-error'); } }); }); 

 <style> .validation-error { border: 1px red solid; background: rgba(255, 0, 0, 0.25); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label id="lbltest">Test </label> <input id="input" class="validate" name="txtTry" type="text" minlength="10" maxlength="10" pattern="^\\d{10}$"> 

Answer 3

请尝试以下操作：

 function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)){ document.getElementById("lbltest").style.color="red" return false; } else{ if (document.getElementById("txtTry").value.length < 10){ document.getElementById("lbltest").style.color="red" } else{ document.getElementById("lbltest").style.color="green" } return true; } } 

 <label id="lbltest">Test </label> <input name="txtTry" id="txtTry" type="text" pattern=".{10,}" minlength="10" maxlength="10" onkeydown="return isNumberKey(event)"> 

Answer 4

尝试使用package input-only-number 。

 /** * Function exec after susses fill input fields * * @param {Event} element */ function callback(element) { console.log('%cValid value: ' + element.target.value, 'color: green; font-size: 2rem;'); } let inputOnlyNumbers = new InputOnlyNumbers({ className: 'input-only-numbers', callback: callback }); inputOnlyNumbers.init(); 

 .success { color: #00ff00; } .fail { color: #ff0000; } 

 <script src="https://unpkg.com/input-only-numbers@1.0.6/dist/index.js"></script> <label id="lbltest">Test</label> <input class="input-only-numbers" name="txtTry" data-limit="10" data-valid="success" data-invalid="fail" type="text" >