Question

我有一个html输入类型=＆＃34;数字＆＃34; html页面中的字段。像这样：

<input type="number">

要验证表单，我需要检查此字段的长度是否正好为3.要执行此操作，我将数字转换为String并执行length()函数。

当数字以零开头时出现问题。比如065

在这种情况下，toString()方法输出65，其长度为2

您对如何获得正确的数字长度有任何想法吗？

Answer 1

我认为您必须将输入类型作为文本，然后使用JavaScript来获取验证的长度。之后，您可以使用Number（）函数将其转换为数字。

Answer 2

将输入类型更改为文本，并使用pattern和maxlength限制输入：

<input type="text" pattern="\d*" maxlength="3">

Answer 3

您可以通过以下两种方式之一解决这个问题：

当用户将焦点移离字段时，请删除前导零
在验证中，删除前导零，然后检查长度

无需转换为数字。

在焦点丢失时删除前导零：

function truncateNumericInput(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.target.nodeName != "INPUT" || event.target.type != "number") {
        return;
    }

    var input = event.target,
        value = event.target.value;

    input.value = value.indexOf(".") > -1
        ? value.replace(/^0{2,}/, "0")
        : value.replace(/^0+/, "");
}

if (document.addEventListener) {
    document.addEventListener("blur", truncateNumericInput, true);
} else {
    document.attachEvent("focusout", truncateNumericInput);
}

JSFiddle：http://jsfiddle.net/67jyg1d9/

在验证期间删除前导零

var regex = /^0+/;
var value = input.value.replace(regex, "");

console.log(value.length <= 3)

Answer 4

<input type="number" name="quantity" min="0" max="999">

这需要注意只能输入数字，并且只能输入999，最多3位数

Answer 5

您可以使用输入类型作为数字来解决您的问题。您可以使用溢出和下溢来构建逻辑，如下所示。

<input id="numtest" type="number" min="10" max="20" />

document.getElementById('numtest').validity.rangeOverflow
document.getElementById('numtest').validity.rangeUnderflow
  or 
document.getElementById('numtest').checkValidity();

rangeUnderflow：如果value小于min，则返回true
rangeOverflow：如果value大于max value，则返回true。

将int以起始零转换为字符串以检查长度

5 个答案: