0

我试图创建一个包含 3 个值、名称、重量和高度的表单。我想强制用户只输入数字而不是字母，所以使用 isNumeric 这有效，但仅适用于 WEIGHT，而不是高度。

这是当前代码

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please')"
    value='Check Field' />
</form>

我尝试了几件事以合并高度字段，例如('weight')('height')甚至('weight'&&'height')将整行写入两次，但改为使用高度。

欢迎任何帮助解决这个问题。

4

2 回答 2

2

如果你必须这样做，试试这个。

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please')"
    value='Check Field' />
</form>

旁注：内联 JavaScript 从来都不是一个好主意，它使维护代码变得更加困难。如果我是你，我会把你的代码改写成这样：

<script type='text/javascript'>
window.onload = function() {

    document.getElementById("click-button").onclick = function() {
        return isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please');
    }

    function isNumeric(elem, helperMsg) {
        var numericExpression = /^[0-9]+$/;
        if (elem.value.match(numericExpression)) {
            return true;
        } else {
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
};

</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input id="click-button" type='button'
    value='Check Field' />
</form>
于 2014-08-18T20:16:17.400 回答
0

你的用例是什么？我认为拥有一个validate()检查所有字段的功能可能会更容易。我询问用例是因为您必须定制函数以适应这三个类别 - 看起来您正试图比这更“面向对象”。

伪代码示例：

function validate() {
    get name form from page
        check that name is valid
        if its not, show error message
    get height form from page
        check that height is valid
        if its not, show error message
    get weight form from page
        check that weight is valid
        if its not, show error message
    everything good? then proceeed to the next step
}

如果您感到困惑，我可以使用一些真实的代码向您展示它。

或者，您可以编辑您的isNumeric()函数以接受调用它的元素。isNumeric()不是将元素传递给它，而是分配为 onclick的每个元素都可以工作。该函数将使用this密钥访问相关数据（类似于this.value）。

于 2014-08-18T20:20:22.473 回答