javaScript学习笔记 

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

　　如果写成

usernameInput.onblur = function checkUserName() {，
则无法调用他
　　2.document.方法使用
　　注意区分html中各个元素的name,id,class属性，一般用document.getElementById()获取单个特定对象,尽量不要使用name,class。
　　区分document.getElementsByName(),它多带了一个s，很容易写错。另外还有document.getElementsByClassName()和
document.getElementsByTagName()。写错时很难检查。可以在网页中用检查代码功能中的console里查看错误信息
 
<!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>



　　


 




 






            

            
posted @ 
2024-03-29 20:20 
冷月无心 
阅读(26) 
评论(0) 
 
收藏 
举报