javascript - 如何动态检查在文本框中输入的数字？

Question

我有5个类似的文本框

<input type ="text" size="3" name="r"><br>
<input type ="text" size="3" id="1" onchange="vali(this.id)" name="I"><br>
<input type ="text" size="3" name="a"><br>
<input type ="text" size="3" name="s"><br>
<input type ="text" size="3"  name="e">
function vali(d){
if(document.getElementById(d).value <0 || document.getElementById(d).value >=30)}

我希望用户在 0 到 30 之间的每个字段中最多只能输入 2 位数字。我无法限制用户在字段中仅输入 2 位数字，例如，当用户输入 151 时，15 应该出现在第一个字段中，并且然后焦点将自动转到第二个字段，剩余数字将输入第二个字段，直到用户输入另一个数字为止。进入焦点后，焦点会像这样出现在字段 3 上。我还需要检查每个字段是否包含 0 到 30 之间的数字，我正在检查上面的代码。此外，当用户提交表单时，应检查所有字段的值是否在(0 到 30)之间5 输入框

<form name="detail" action ="selectjzone.jsp" onsubmit="return validate(this)">

编辑的部分是

if (num < 0) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " " +  "is  outside the range0 to 30" );
return false;
} else if (num > 30) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " "+      "is  outside the range0 to 30" );
return false;
}
    return true;

Answer 1

下面是如何验证字段并将任何额外内容移至下一个字段的开始:

此处的工作演示:http://jsfiddle.net/jfriend00/vpTq5/

HTML:

<input id="a" type ="text" size="3" onkeyup="validate(this, 'b')" name="r"><br>
<input id="b" type ="text" size="3" onkeyup="validate(this, 'c')" name="I"><br>
<input id="c" type ="text" size="3" onkeyup="validate(this, 'd')" name="a"><br>
<input id="d" type ="text" size="3" onkeyup="validate(this, 'e')" name="s"><br>
<input id="e" type ="text" size="3" onkeyup="validate(this)" name="e">

Javascript:

function validate(obj, next) {
    // fetch value and remove any non-digits
    // you could write more code to prevent typing of non-digits
    var orig = obj.value;
    var mod = orig.replace(/\D/g, "");
    var nextObj;
    // check length and put excess in next field
    if (mod.length > 2) {
        // shorten the current value
        obj.value = mod.substring(0,2);
        if (next) {
            // put leftover into following value
            var nextObj = document.getElementById(next);
            if (!nextObj.value) {
                nextObj.value = mod.substring(2);
                nextObj.focus();
            }
        }
    } else {
        // only set this if necessary to prevent losing cursor position
        if (orig != mod) {
            obj.value = mod;
        }
    }
    // convert to number and check value of the number
    var num = Number(obj.value);

    // don't know what you want to do here if the two digit value is out of range
    if (num < 0) {
        obj.value = "0";
    } else if (num > 30) {
        obj.value = "30";
    }
}

一些注意事项:

1. HTML 对象的 ID 值不能以数字开头。他们必须以字母开头。
2. 当输入大于 30 的数字时，您必须决定您想要的行为。
3. 请记住，输入字段值是字符串。如果您想将它们视为数字，则必须将它们转换为数字。
4. 使用更多代码，您实际上可以防止输入非数字键，并且可以在输入第三个值之前移动焦点。
5. 有一些方法可以将数据导入不会触发 onkeyup 的字段(复制/粘贴、拖/放)，因此您也必须在其他时间进行验证。
6. 如果您可以使用像 jQuery 这样的框架，这可以通过更简单的方式完成。