Question

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

请帮助我的条件。谢谢。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

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使处理事件变得容易一些，我已经集成了库来解决这个问题。我保留了您可以根据自己的需求使用或删除的元素属性。

＆＃13;

$(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');
    }
  });
});

＆＃13;

<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}$">

＆＃13;

Answer 3

尝试以下方法：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 4

尝试使用软件包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" 
>

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

4 个答案: