JavaScript 表单验证

时间 2019-12-10

原文原文链接

JavaScript 表单验证

HTML 表单验证可以经过 JavaScript 来完成。php

若是某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：html

JavaScript 实例

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

该函数可以在表单提交时被调用：

HTML 表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

具体实例测试以下

<!DOCTYPE html>
<html>
    <head>
    <script>
        function validateForm() {
            var x = document.forms["mysForm"]["fname"].value;
            if (x == "") {
                alert("必须填写姓名！");
                return false;
            }
        }
    </script>
    </head>
<body>

<form name="mysForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>