JS学习之表单验证

最新推荐文章于 2023-05-28 07:56:23 发布

原创最新推荐文章于 2023-05-28 07:56:23 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

java学习之路专栏收录该内容

749 篇文章

订阅专栏

本文详细介绍了一个使用HTML、CSS和JavaScript实现的表单验证案例。通过实时反馈，确保用户输入的用户名和密码符合特定规则，包括长度限制、字符类型检查及密码一致性验证。

要求：
在这里插入图片描述 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span {
            size: 12px;
            color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var registerFormEtn = document.getElementById("registerForm");
            var userNameEtn = document.getElementById("userName");
            var userNameErrorEtn = document.getElementById("userNameError");
            // 测试姓名
            userNameEtn.onblur = function () {
                // 获得用户名
                var userName = userNameEtn.value;
                userName = userName.trim();
                // 用户名不能为空
                if (userName == "") {
                    userNameErrorEtn.innerText = "用户名不能为空";
                } else {
                    // 用户名必须在6~14位之间
                    if (userName.length < 6 || userName.length > 14) {
                        userNameErrorEtn.innerText = "用户名必须在6~14位之间";
                    } else {
                        // 用户名只能由数字和字母组成
                        var regExp = /^[0-9a-zA-Z]+$/;
                        var ok = regExp.test(userName);
                        if (!ok) {
                            userNameErrorEtn.innerText = "用户名只能由数字和字母组成";
                        }
                    }
                }
            }
            userNameEtn.onfocus = function () {
                userNameErrorEtn.innerText = "";
            }

            // 获得密码
            var passwordEtn = document.getElementById("password");
            var passwordEtn2 = document.getElementById("password2");
            var passwordErrorEtn = document.getElementById("passwordError");
            // 测试密码
            passwordEtn2.onblur = function () {
                var password = passwordEtn.value;
                var password2 = passwordEtn2.value;
                password2 = password2.trim();
                if (password2=="") {
                    passwordErrorEtn.innerText="密码不能为空";
                }else{
                    if (password!=password2) {
                        passwordErrorEtn.innerText="两次输入密码要相同";
                    }
                }
            }
            passwordEtn2.onfocus = function () {
                passwordErrorEtn.innerText="";
            }

            // 如果用户发现自己重复密码填的才是自己想要的，又回去改了一下密码，用来判断这种情况
            passwordEtn.onblur = function(){
                var password = passwordEtn.value;
                var password2 = passwordEtn2.value;
                if (password2!="" && password==password2){
                    passwordErrorEtn.innerText="";
                }
            }

            // 点击提交按钮
            var btnSubmitEtn = document.getElementById("btnSubmit");
            btnSubmitEtn.onclick = function () {
                userNameEtn.focus();
                userNameEtn.blur();
                passwordEtn2.focus();
                passwordEtn2.blur();
                if (userNameErrorEtn.innerText=="" && passwordErrorEtn.innerText==""){
                    registerFormEtn.submit();
                }
            }
        }
    </script>
</head>
<body>
<form id="registerForm" action="http://www.baidu.com" method="get">
    用户名：<input type="text" name="username" id="userName"/>
    <span id="userNameError"></span>
    <br/>
    <br/>
    <br/>
    密码：<input type="password" name="password" id="password"/>
    <br/>
    <br/>
    <br/>
    确认密码：<input type="password" id="password2"/>
    <span id="passwordError"></span>
    <br/>
    <br/>
    <br/>
    <input type="button" id="btnSubmit" value="注册"/>
</form>
</body>
</html>