使用Javascript验证表单输入

我有一个表单，它接受用户输入，我试图验证用户是否使用javascript输入了一个数字（是的，我知道我可以改为使用HTML验证）。我遇到的问题是，它并没有阻止用户为应该是整数的字段输入字母

我的想法是，当您提交表单时，它将运行runthroughnums（）方法，该方法将使用checkNum（）helper函数检查所有数字输入。有人能看出这不能正常工作的原因吗

<form name="formname" onsubmit="runthroughnums()" action="new.php" method="post">

<script>
function runthroughnums(){
    var intput1 = document.forms["formname"]["intval1"], "Input 1");

    if(isNaN(input1)){
        window.alert(input + "must be an integer value");
    }   
</script>

函数runthroughnums（）{
var intput1=document.forms[“formname”][“intval1”]，“Input 1”）；
如果（isNaN（输入1））{
window.alert（输入+“必须是整数值”）；
}   

我知道您指定了JS进行验证，但最好从HTML和CSS开始

在HTML元素上使用type、required、title和pattern属性

样式：有效和无效的伪类

<input type="number" required pattern="[0-9]{5}" title="5 Digit Zip Code">
<style>
  input:valid { border: solid 2px green; }
  input:invalid { border: solid 2px red; }
</style>

输入：有效{边框：实心2px绿色；}
输入：无效{边框：实心2px红色；}

试试这个。如果你能提供表单的html代码，事情会更简单

    <script>
        function runthroughnums(){
            /*
            checkNum(document.forms["formname"]["intval1"], "Input 1");
            checkNum(document.forms["formname"]["intval2"], "Input 2");
            checkNum(document.forms["formname"]["intval3"], "Input 3");
            */
            var x = document.froms[0];
            for (var i = 0; i < x.length; i++) {
                /* debug check*/
                console.log(x.elements[i].value);
                console.log(x.elements[i].id);

                checkNum(x.elements[i].value, x.elements[i].id);

            }

        }

        function checkNum(var i, String input){
            if(isNaN(i)){
                window.alert(input + "must be an integer value");
            }   
        }
    </script>

函数runthroughnums（）{
/*
checkNum（document.forms[“formname”][“intval1”]，“Input 1”）；
checkNum（document.forms[“formname”][“intval2”]，“Input 2”）；
checkNum（document.forms[“formname”][“intval3”]，“Input 3”）；
*/
var x=document.froms[0]；
对于（变量i=0；i

我完全建议使用表单验证程序库。根据我的经验，这一直是完成工作的一种非常快速和简单的方法，并允许您实现自定义验证方法和错误消息。这和开箱即用将应用一些漂亮的错误消息标记和突出显示

因此，我还建议使用jQuery输入屏蔽来帮助控制用户输入

根据我的经验，这两个库在跨平台/浏览器时似乎工作得非常好，在移动键盘方面几乎没有问题

---

正如预期的那样，执行服务器端验证也是非常必要的。

函数checkNum（变量i，字符串输入）

 — 这不是JavaScript。请使用（点击

F12

）并读取任何错误。使用诸如立即查找代码问题之类的工具。

isNaN（i）

 — 这永远都是正确的。

i

从来不是一个数字；它总是一个。您可能希望输入值作为数字；请阅读。@SebastianSimon我对代码做了一些更改，现在可以使用了。但是，“intval1”不是必填字段，因此当用户提交表单时，如果表单为空，则会显示窗口警报。是否有方法仅在为该输入提交内容时显示警报？请尝试使用布尔运算符。@SebastianSimon无法真正想出实现此目的的方法。。如果表单为空，则可能会将布尔值设置为true，并且仅为ru在if语句中，如果类似的布尔值为false？