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

  input:valid { border: solid 2px green; }

  input:invalid { border: solid 2px red; }

</style>

Answer 2

我完全推荐使用表单验证器库。根据我的经验，https://parsleyjs.org/一直是完成工作的一种快速简便的方法，并且允许您实现自定义验证方法和错误消息。那和开箱即用将应用一些不错的错误消息标签和突出显示。

有了这个，我还建议使用 jQuery 输入掩码来帮助控制用户输入。https://plugins.jquery.com/jquery.inputmask/

根据我的经验，这两个库似乎可以很好地跨平台/浏览器工作，并且在移动键盘方面几乎没有问题。

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

Answer 3

试试这个。如果您可以提供表单的 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>