javaScript学习笔记

关于表单验证的简单实践
注意点：
　　1.函数的使用
　　如果在script中需要调用某个function，例如checkUserName(),请确保在定义该函数时的写法为

1 2	`usernameInput.onblur = checkUserName;` `function checkUserName() {`

　　如果写成

1	`usernameInput.onblur = function checkUserName() {，<br>则无法调用他<br>　　2.document.方法使用<br>　　注意区分html中各个元素的name,id,class属性，一般用document.getElementById()获取单个特定对象,尽量不要使用name,class。<br>　　区分document.getElementsByName(),它多带了一个s，很容易写错。另外还有document.getElementsByClassName()和`

1	`document.getElementsByTagName()。写错时很难检查。可以在网页中用检查代码功能中的console里查看错误信息`

100

101

102

103

104

105

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
</head>
 
<body>
    <form action="#" id="for1" align="center" method="GET">
        <h2>欢迎注册</h2>
        <h4>已有账号，登录</h4>
        用户名：<input type="text" name="tex1" id="username"><br>
        <span id="username_err" class="err_msg" style="display: none">用户名格式错误</span><br>
        密码：<input type="password" name="tex2" id="password"><br>
        <span id="password_err" class="err_msg" style="display: none">密码格式错误</span><br>
        手机号：<input type="text" name="tex3" id="tel"><br>
        <span id="tel_err" class="err_msg" style="display: none">密码格式错误</span><br>
        <input type="submit" value="注册"><br>
        <input type="button" onclick="on()" id="99" value="判断">
    </form>
    <script>
        //1.验证用户名
 
        //   var usernameInput = document.getElementById("username");
        //1.2 绑定onblur事件 失去焦点
        //   usernameInput.onblur = checkUserName;
 
        var usernameInput = document.getElementById("username");
        //  alert(usernameInput)
        //2.绑定onblur事件  失去焦点
        usernameInput.onblur = checkUserName;
        function checkUserName() {
            //3.获取用户输入的用户名
            var username = usernameInput.value.trim();
            //4.判断用户名长度是否符合规则
            var flag = username.length >= 6 && username.length <= 12;
            if (flag) {
                //符合规则
                document.getElementById("username_err").style.display = 'none';
            } else {//不符合规则
                document.getElementById("username_err").style.display = '';
            }
 
            return flag;
        }
 
        //2.密码提示信息
        var passwordInput = document.getElementById("password");
        //  alert(usernameInput)
        //2.绑定onblur事件  失去焦点
        passwordInput.onblur = checkPassword;
        function checkPassword() {
            //3.获取用户输入的用户名
            var password = passwordInput.value.trim();
            //4.判断用户名长度是否符合规则
            var flag = password.length >= 6 && password.length <= 12;
            if (flag) {
                //符合规则
                document.getElementById("password_err").style.display = 'none';
            } else {//不符合规则
                document.getElementById("password_err").style.display = '';
            }
 
            return flag;
        }
 
        var telInput = document.getElementById("tel");
        //  alert(usernameInput)
        //2.绑定onblur事件  失去焦点
        telInput.onblur = checkTel;
        function checkTel() {
            //3.获取用户输入的用户名
            var tel = telInput.value.trim();
            //4.判断用户名长度是否符合规则
            flag = (tel.length == 11);
            if (flag) {
                //符合规则
                document.getElementById("tel_err").style.display = 'none';
            } else {//不符合规则
                document.getElementById("tel_err").style.display = '';
            }
 
            return flag;
        }
 
        //4.判断提交表单前是否所有信息都符合规范
 
        // function on() {
        //     var flag = (checkUserName() && checkPassword() && checkTel());
        //     alert("111");
        //     alert(flag);
        // }
 
        var regForm = document.getElementById("for1");
        regForm.onsubmit = function checkAll() {
            var flag = (checkUserName() && checkPassword() && checkTel());
            return flag;
        }
    </script>
</body>
 
</html>