表单验证

最新推荐文章于 2024-04-30 08:58:14 发布

原创最新推荐文章于 2024-04-30 08:58:14 发布 · 181 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的表单验证脚本实现，确保用户输入的数据符合特定格式要求，如电子邮件地址的有效性、密码强度及一致性检查等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单验证</title>
    <script type="text/javascript">

        function $(id) {
            return document.getElementById(id);
        }

        function check() {
            var email = $("email").value;
            var password = $("password").value;
            var repassword = $("repassword").value;
            var name = $("name").value;

            $("emailinfo").innerHTML = "";
            $("passwordinfo").innerHTML = "";
            $("repasswordinfo").innerHTML = "";
            $("nameinfo").innerHTML = "";

            if(email == "") {
                $("emailinfo").innerHTML = "Email值不能为空";
                $("email").focus();
                return false;
            }

            if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
                $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
                $("email").focus();
                return false;
            }

            if(password == "") {
                $("passwordinfo").innerHTML = "密码不能为空";
                $("password").focus();
                return false;
            }

            if(password.length < 6) {
                $("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
                $("password").focus();
                return false;
            }

            if(repassword != password) {
                $("repasswordinfo").innerHTML = "两次输入的密码不一致";
                $("repassword").focus();
                return false;
            }

            if(name == "") {
                $("nameinfo").innerHTML = "姓名不能为空";
                $("name").focus();
                return false;
            }

            for(var i = 0; i < name.length; i++) {
                var j = name.subString(i , i+1);
                if(isNaN(j) == false) {
                    $("nameinfo").innerHTML = '姓名中不能包含数字';
                    $("name").focus();
                    return false;
                }
            }
        }
    </script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
    <div>
        Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span>
    </div>
    <div>
        密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span>
    </div>
    <div>
        重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span>
    </div>
    <div>
        姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span>
    </div>
    <div>
        <input type="submit" value="注册" />
    </div>
</form>
</body>
</html>