JavaScript之表单校验_on'blur 保存校验javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41628448/article/details/104661953
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
        .error{
            color: red;
        }
    </style>
    <script>
        /*
        1、给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
	        如果都为true，则监听器方法返回true
	        如果有一个为false，则监听器方法返回false
        2、定义一些方法，分别校验各个表单项
        3、给各个表单项绑定onblur事件
         */
        window.onload = function () {
            //1、给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //调用用户校检方法 checkUsername();
                //调用密码校检方法 checkPassword();
                //return checkUsername() && checkPassword();
                return checkUsername() && checkPassword();
            }
            //给用户名和密码分别绑定离焦事件
            //方法对象！！！不加括号！！！
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }
            //校检用户名
            function checkUsername(){
                //1、获取用户名的值
                var username = document.getElementById("username").value;
                //2、定义正则表达式
                var reg_username = /^\w{6,12}$/
                //3、判断值是否符合表单正则的规则
                var flag = reg_username.test(username);
                //4、提示信息
                var s_username = document.getElementById("s_username");
                if (flag){
                    //提示绿色对勾
                    s_username.innerHTML = "<img width= '35' height='25' src='../img/gou.png'/>"
                }
                else {
                    //提示红色用户名有误
                    s_username.innerHTML = "用户名格式有误";
                }
                return flag;
            }
            //校检密码
            function checkPassword(){
                //1、获取用户名的值
                var password = document.getElementById("password").value;
                //2、定义正则表达式
                var reg_password = /^\w{6,12}$/
                //3、判断值是否符合表单正则的规则
                var flag = reg_password.test(password);
                //4、提示信息
                var s_password = document.getElementById("s_password");
                if (flag){
                    //提示绿色对勾
                    s_password.innerHTML = "<img width= '35' height='25' src='../img/gou.png'/>"
                }
                else {
                    //提示红色用户名有误
                    s_password.innerHTML = "密码格式有误";
                }
                return flag;

        }
    </script>
</head>
<body>
<form id="form">
    <table align="center" >
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" id="username" name="username" >
                <span id="s_username" class="error"></span>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" id="password" name="password" >
                <span id="s_password" class="error"></span>
            </td>
        </tr>
        <tr>
            <td>邮件</td>
            <td><input type="text" id="email" name="email" ></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" id="phone" name="phone" ></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" value="male" >男
                <input type="radio" name="gender" value="female">女
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td><input type="date" id="birthday" name="birthday" ></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" id="register" name="register" value="注册" ></td>
        </tr>
    </table>
</form>

</body>
</html>