javascript - Html 表单无法使用 JavaScript 验证输入

我正在创建一个应用程序。 HTML 文件如下所示:

<!DOCTYPE html>
<html>
    <body style="background-color: #ccc">

        <script type="javascript">
            function validateform(){
                alert("Hello");
                var firstnameErr="";
                var valid = true;
                var name = document.myform.fname.value;
                var types = /^[a-zA-Z]+$/;

                if (fname==null || fname=="") {
                    firstnameErr = "required";
                    valid = false;
                } else if (!fname.value.match(types)) {
                    firstnameErr = "format error";
                    valid = false;
                }
                return valid;
            }
        </script>

        <form name="myform" method="post" onsubmit="return  validateform()" action="/Project/ViewList.php">
            Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20"> 
            <span class="error">*
                <script type="javascript"> 
                    document.write(firstnameErr);
                </script>
            </span>
            <input type="submit" name="submit" value="Submit">
        </form>

    </body>
</html>

当我点击提交按钮时，它直接重定向到“ViewList.php”，似乎没有运行 validatefom()。我添加了 alert() 来检查函数是否正在执行。我希望我的表单仅在满足验证要求时才提交，而不是在 valid 为 false 时提交。

最佳答案

除了打字错误，我发现的主要问题是你的脚本没有被执行，你的 validateform()方法不可用。它发生因为你的脚本标签type属性不正确 <script type="javascript">

要让它工作，你需要把它改成这样 <script type="text/javascript">

请更改您的验证方法validateform()因为它也可能有错字。

关于javascript - Html 表单无法使用 JavaScript 验证输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45041819/