isNumeric 未测试所有表单字段

Posted 2023-03-27

【中文标题】isNumeric 未测试所有表单字段

【英文标题】：isNumeric not testing all form fields

【发布时间】：2014-08-18 20:09:46

【问题描述】：

我正在尝试创建一个包含 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>

我尝试了几种方法来合并 Height 字段，例如 ('weight')('height') 或 ('weight'&&'height')，甚至将整行写了两次，但改为使用 Height。

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

【问题讨论】：

jsfiddle.net/gv7y7vp1 这是您的示例，但带有高度字段，请在此处编辑以向我们展示您的尝试。

【参考方案1】：

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

<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>

【参考方案2】：

您对此有何用例？我认为拥有一个检查所有字段的函数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）。