Question

我正在创建一个应用程序。 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（）以检查函数是否正在执行。我希望我的表单只在满足验证要求时才提交，而不是在有效为假时提交。

Answer 1

除了Typo错误之外，我发现的主要问题是您的脚本未执行且您的validateform()方法不可用。它发生了，因为您的脚本标记type属性不正确 <script type="javascript">

要使其正常工作，您需要将其更改为 <script type="text/javascript">

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

Answer 2

代码的问题在于OP正在使用HTML5表单验证传统方式。在HTML5之前，您必须使用JavaScript进行前端验证;现在，事情也变得更加简单和容易。当然，OP会将以下示例中的操作值替换为所需的URL。

注意：OP的代码中存在错误，但是如果你摆脱了JavaScript并编写HTML代码，请确保将以下内容添加到文本输入中：

required pattern="[a-zA-Z]+"

然后表单验证。换句话说，当您使用HTML5 for form validation时，您不必非常努力地工作：）

＆＃13;

<form id="myform" name="myform" method="POST" action="https://www.example.com">
  <label for="fname">Firstname</label>: <input name="fname"  placeholder="First name"  maxlength="20" required pattern="[a-zA-Z]+">
  <input type="submit"  name="submit" value="Submit">
</form>

＆＃13;

对于那些喜欢用老式方式做事的人，请参阅OP revision的OP代码。注意：它使用最少的变量，使用快捷方式来减少冗长，并使用函数进行组织。此外，它对用户来说也很友好。

Answer 3

你做的方式永远无法使用document.write输出任何东西，使用它，为我工作：

<!DOCTYPE html>

    <script>
        function validateform(){
            alert("Hello");

            var valid = true;
            var fname = document.myform.fname.value;

            var types = /^[a-zA-Z]+$/;
            if (fname==null || fname=="") {
                firstnameErr = 'required';
                valid = false;
            } else if (!fname.match(types)) {
                firstnameErr = 'format error';
                valid = false;
            }
            document.getElementById('msg').innerHTML = firstnameErr;
            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">* <label id='msg'></label> </span>
        <input type="submit" name="submit" value="Submit">
    </form>

</body>

Answer 4

您的代码中看起来有一系列拼写错误，试试这个

<!DOCTYPE html>
<html>

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

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

            if (name == null || name == "") {
                firstnameErr = "required";
                valid = false;
            } else if (!name.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> 
                    document.write(firstnameErr);
                </script>
            </span>
        <input type="submit" name="submit" value="Submit">
    </form>

</body>

</html>

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

4 个答案: