使用 Javascript 验证表单输入

Question

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

我的想法是，当您提交表单时，它将运行 runthroughnums() 方法，该方法将使用 checkNum() 辅助函数检查所有数字输入。谁能看到这不能正常工作的任何原因？

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

Answer 1

我知道您指定了 JS 进行验证，但是从 HTML 和 CSS 开始可能会更好。在 HTML 元素上使用 type、required、title 和 pattern 属性。设置 :valid 和 invalid 伪类的样式。<input type="number" required pattern="[0-9]{5}" title="5 Digit Zip Code"><style>&nbsp; input:valid { border: solid 2px green; }&nbsp; input:invalid { border: solid 2px red; }</style>

Answer 2

我完全推荐使用表单验证器库。根据我的经验，https://parsleyjs.org/一直是完成工作的一种快速简便的方法，并且允许您实现自定义验证方法和错误消息。那和开箱即用将应用一些不错的错误消息标签和突出显示。有了这个，我还建议使用 jQuery 输入掩码来帮助控制用户输入。https://plugins.jquery.com/jquery.inputmask/根据我的经验，这两个库似乎可以很好地跨平台/浏览器工作，并且在移动键盘方面几乎没有问题。正如预期的那样，执行服务器端验证非常必要。

Answer 3

试试这个。如果您可以提供表单的 html 代码，事情会更容易。&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; function runthroughnums(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkNum(document.forms["formname"]["intval1"], "Input 1");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkNum(document.forms["formname"]["intval2"], "Input 2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkNum(document.forms["formname"]["intval3"], "Input 3");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = document.froms[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < x.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* debug check*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(x.elements[i].value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(x.elements[i].id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkNum(x.elements[i].value, x.elements[i].id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function checkNum(var i, String input){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isNaN(i)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.alert(input + "must be an integer value");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>