JS（Javascript）校验表单项的内容是否合规

        /**
         * 分析：
         * 1.给表单绑定onsubmit事件
         * 监听器中判断每个方法检验的结果，如果都是true，则监听器方法返回true；如果有一个为false,
         * 则监听器方法返回false
         * 2.定义一些方法分别校验各个表单项
         * 3.给各个表单项绑定onblur事件，失去焦点后触发校验监听器
         */


        window.onload = function () {
            // 1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                // 调用用户名校验方法，调用密码校验方法等方法
                return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();
            };

            // 给用户名输入框注册离焦事件监听器
            document.getElementById("userName").onblur = function () {
                // 调用校验用户名的方法
                checkUsername();
            };

            // 给密码输入框注册离焦事件监听器
            document.getElementById("password").onblur = function () {
                // 调用校验密码的方法
                checkPassword();
            };

            // 给手机号输入框注册离焦事件监听器
            document.getElementById("phoneNumber").onblur = function () {
                // 调用校验手机号的方法
                checkPhoneNumber();
            }

            // 给邮箱输入框注册离焦事件监听器
            document.getElementById("email").onblur = function () {
                // 调用校验邮箱的方法
                checkEmail();
            }

            // 给验证码输入框绑定离焦事件
            document.getElementById("verCode").onblur = function () {
                // 调用校验验证码的方法
                checkVerCode();
            }

        };

        // 校验用户名
        function checkUsername() {
            // 1.获取用户名
            var userName = document.getElementById("userName").value;
            // 2.定义正则表达式，匹配6-12个英文字母或数字
            var regUserName = /^\w{6,12}$/;

            // 3.判断用户名是否符合正则表达式
            var flag = regUserName.test(userName);
            // 4.提示信息
            if (flag) {
                // 用户名合规，再查询用户名是否被占用了
                flag = findUser();
            } else {
                // 提示：用户名格式错误
                document.getElementById("prompt-un").innerHTML = "用户名格式错误！";
            }

            return flag;
        }

        // 查询用户名是否被占用
        function findUser() {
            var userName = $("#userName").val();
            // alert(userName);
            $.ajax({
                "url": "finduser.action?accountName=" + userName,
                "type": "GET",
                "dateType": "json",
                "success": function (data) {
                    // data是一个js对象，服务端返回的是json字符串，到了前端被构造成一个js对象
                    if (data.ok) {
                        // 返回true，表示没有被占用，可以注册
                        document.getElementById("prompt-un").innerHTML = "";
                        return true;
                    } else {
                        // 返回false，表示已经被占用，不可以注册
                        document.getElementById("prompt-un").innerHTML = "用户名已被占用！";
                        return false;
                    }
                }
            });
        }

        /**
         * 校验密码
         */
        function checkPassword() {
            // 1.获取密码
            var password = document.getElementById("password").value;
            // 2.定义正则表达式
            var regPassword = /^\w{6,12}$/;

            // 3.判断密码是否符合正则表达式
            var flag = regPassword.test(password);
            // 4.提示信息
            if (flag) {
                // 符合正则表达式则提示对钩
                document.getElementById("prompt-pw").innerHTML = "";
            } else {
                // 不符合正则表达式则提示：密码格式错误
                document.getElementById("prompt-pw").innerHTML = "密码格式错误！";
            }

            return flag;
        }

        // 校验邮箱
        function checkEmail() {
            let flag = true;
            // 获取邮箱地址
            let email = document.getElementById("email").value;
            if (!email) {
                // 如果邮箱为空，直接返回true
                return flag;
            }
            let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
            flag = regEmail.test(email);
            if (flag) {
                // 如果符合正则表达式则显示对钩图标
                document.getElementById("prompt-email").innerHTML = "";
            } else {
                // 如果不符合正则表达式则显示：邮箱格式错误
                document.getElementById("prompt-email").innerHTML = "邮箱格式错误";
            }
        }


        // 校验手机号码
        function checkPhoneNumber() {
            var flag = true;
            // 获取手机号码
            var phoneNumber = document.getElementById("phoneNumber").value;
            if (!phoneNumber) {
                // 手机号为空，直接返回true
                return flag;
            }
            var regPhoneNumber = /(\+86)?1\d{10}/;
            flag = regPhoneNumber.test(phoneNumber);
            if (flag) {
                // 符合正则表达式则显示对钩
                document.getElementById("prompt-pn").innerHTML = "";
            } else {
                // 不符合正则表达式则显示：手机号格式错误
                document.getElementById("prompt-pn").innerHTML = "手机号格式错误";
            }

            return flag;
        }

        // 校验验证码
        function checkVerCode() {
            // 获取验证码
            let verCode = document.getElementById("verCode").value;
            // 定义正则表达式，匹配任意数字或英文字母组合而成的6个字符
            let regVerCode = /^[\d\a]{6}$/;
            // 校验验证码
            let flag = regVerCode.test(verCode);
            if (flag) {
                // 验证码格式正确则调用服务端的校验验证码的接口，这里省略
                document.getElementById("prompt-vc").innerHTML = "";
            } else {
                // 验证码格式错误，显示：验证码格式错误
                document.getElementById("prompt-vc").innerHTML = "验证码格式错误";
            }
            return flag;
        }