Question

我有一个表单，用户可以在其中输入数字，例如员工ID号或类似的数字。该字段设置为拒绝任何非数字的内容，因此它们不能只是放入“ bob”或对键盘进行翻滚或其他操作。否则，我会将其转换为字符串。

我需要进一步验证并使该表格拒绝不匹配正确数字位数的任何内容，比如说5。它还需要计算前导零。例如-假设员工ID为01234，它应与5位数字匹配。目前，我正在失去前导零，并且它拒绝上面的示例中的值。

那么，我该怎么做：

计算该数字中的位数
保留前导零，
确定他们的用户有义务使用JavaScript公式输入数字吗？

Answer 1

您应该遵循最初的想法，并在此字段中使用字符串。您可以使用简单的正则表达式（例如

）检查字符串是否为数字

position: sticky

如果字符串仅包含数字，则应返回true。

Answer 2

如果使用element.value获得输入元素的值，它将返回保留前导零的字符串。

限制输入字段的字符在HTML text input allow only numeric input

中

我已经复制并修改了下面的示例，以显示一个输入字段，该字段最多接受8个数字，并将ID记录在提交状态。

// Restricts input for the given textbox to the given inputFilter.
// Source: https://stackoverflow.com/a/469362
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

const inputField = document.getElementById("employee-id");
const submitButton = document.getElementById("submit");

setInputFilter(inputField, function(value) {
  return /^\d*$/.test(value) && (value.length <= 8);;
});
submitButton.addEventListener('click', event => {
  console.log(inputField.value)
})

User ID: <input id="employee-id">
<button id="submit">submit</button>

Answer 3

尝试一下。

<input id="number" type="text" minlength="5" maxlength="5" value="42" pattern="\d{5}">

通过JS检查有效性

document.querySelector('#number').checkValidity()

通过CSS检查有效性

input {
  outline: none;
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

如果您需要进一步的验证，只需使用javascript对其进行验证。

如何计算JavaScript前导零的位数？

3 个答案: