如何计算javascript中带前导零的位数？

Question

我有一个表单，用户可以在其中输入一个数字，比如员工 ID 号或类似的东西。 该字段被设置为拒绝任何不是数字的东西，所以他们不能只是输入“bob”或faceroll键盘或其他任何东西。 否则我会将其转换为字符串。

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

那么，我该如何：

• 计算这个数字的位数，
• 保留前导零，
• 确保他们的用户有义务使用 JavaScript 公式输入数字？

Answer 1

您应该按照您的原始想法并为这样的字段使用字符串。 您可以使用简单的正则表达式检查字符串是否为数字，例如

let regex = /^[0-9]*$/;
regex.test(string);

如果字符串只包含数字，它应该返回 true。

Answer 2

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

限制输入字段的字符包含在HTML 文本输入中，只允许数字输入

我复制并修改了下面的示例以显示一个输入字段，该字段最多只接受 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 来验证它。