文本输入数值验证

Question

我正在尝试让文本字段只允许数字。 （即“0-9”不是小数。）我遇到了this popular answer，它说：

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

我试过了，但问题是，它允许您粘贴任何字符。如何禁止粘贴“非法”字符？此外，此代码是否适用于不同的键盘，例如德语键盘？

请不要发布有关type="number" 的信息。由于很多原因，我没有使用它。

Answer 1

您可以专门intercept the paste event 并在那里处理您的案件。

Answer 2

HTML 代码：

<form name="myForm" action="" onsubmit="return checkInp()" method="post">
  First name: <input type="text" name="age">
 <input type="submit" value="Submit">

Javascript 代码：

function checkInp()
   {
     var x=document.forms["myForm"]["age"].value;
       if (isNaN(x)) 
          {
            alert("Must input numbers");
            return false;
          }
   }

Answer 3

对于用户友好的界面，通常最好根据输入的实际值进行验证，所以不要使用 charCode，使用输入的值。为此，一个简单的正则表达式适合：

if (/\D/.test(value)) {
  // a non–digit was entered
}

通常最好在用户完成输入时进行验证，例如对于银行业务，我可能会将信用卡余额复制并粘贴为“1,203.43”，然后删除逗号。然后，当我使用合适的屏幕消息离开（onblur 或 onsubmit）该字段时，验证该字段，如果错误则让我修复它。

但在某些情况下，它也适合使用 keyup 或其他一些合适的事件。

因此，对于应该只有数字的输入，您可能会执行以下操作：

function validate(el) {
  if (el.classList.contains('numsOnly')) {
    document.getElementById(el.id + 'Err').innerHTML = /\D/.test(el.value)? "Must contain only digits" : '';
  }
}

.screenHint {font: sans-serif; font-size: 80%; color: #999999}

<label for="aNum">A number:<input name="aNum" id="aNum" class="numsOnly"
       onblur="validate(this)" onkeyup="validate(this)" onpaste="validate(this)"
       placeholder="1234"></label><span class="screenHint">Digits only</span><br>
<span style="color:red; background-color: white;" id="aNumErr"></span>

当然，您可能会动态添加侦听器并进行更广泛的验证，但上面显示了一些原则。

Answer 4

您可以使用 keypress 事件，该事件将在每次输入新字符时检查输入。

var txt = document.getElementById("phone");
txt.onkeypress = function(key) {
  if (key.charCode < 48 || key.charCode > 57) return false;
}
txt.addEventListener("paste",
  function(e) {
    e.preventDefault();
    var pastedData = e.clipboardData.getData('Text');
    if (!isNaN(pastedData)) {
      txt.value += pastedData;
    }
  }, true);

<fieldset>
  <label for="phone">Phone:</label>
  <input type="text" id="phone" />
</fieldset>

Answer 5

拦截oninput 事件并在那里处理粘贴的文本。请注意，此事件也会在按键输入时触发。

<script>
function validate(element) {
  if (element.value.match('\\D')) {
    alert('Please enter only numeric values\n(You entered ' + element.value + ')');
    element.value = '';
  }
}
</script>

<input type="text" oninput="validate(this);">