HTML表单注册页面校验

文章目录

• 校验用户名
• 校验密码
• 校验Email
• 校验姓名

---

校验用户名

 //校验用户名
        function checkUsername() {
            //1. 获取用户名值
            var username = $("#username").val();
            //2. 定义正则,以单词字符开头，包含8和20
            var reg_username = /^\w{8,20}$/
            //3. 判断，给出提示信息,test()方法是用来判断username是否正确
            var flag = reg_username.test(username);
            if (flag) {
                //用户名合法
                $("#username").css("border", "");
            } else {
                //用户名非法，加一个红色边框
                $("#username").css("border", "1px solid red");
            }
            return flag;
        }

---

校验密码

//校验密码
        function checkPassword() {
            //1. 获取password
            var password = $("#password").val();
            //2. 定义正则,以单词字符开头，包含8和20,正则格式/^  $/
            var reg_password = /^\w{8,20}$/
            //3. 判断，给出提示信息,test()方法是用来判断password是否正确
            var flag = reg_password.test(password);
            if (flag) {
                //用户名合法
                $("#password").css("border", "");
            } else {
                //用户名非法，加一个红色边框
                $("#password").css("border", "1px solid red");
            }
            return flag;
        }

校验email

代码如下（示例）：
 

//校验邮箱
        function checkEmail(){
            //获取email
            var email = $("#email").val();
            //定义正则
            var reg_email = /^\w+@\w+\.\w+$/;
            //判断
            var flag = reg_email.test(email);
            if (flag) {
                $("#email").css("border", "");
            } else {
                $("#email").css("border", "1px solid red");
            }
            return flag;
        }

校验姓名

代码如下（示例）：

 //校验姓名
        function checkName(){
            //获取姓名
            var name = $("#name").val();
            //正则表达 中文、英文、数字但不包括下划线等符号
            var reg_name = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
            //判断
            var flag = reg_name.test(name);
            if (flag) {
                $("#name").css("border", "");
            } else {
                $("#name").css("border", "1px solid red");
            }
            return flag;
        }

---

总结

本节校验内容的代码基本都是类似的，需要添加其他校验的，可按照上面的代码自行添加（比如添加个校验手机号也是可的），在校验代码后可以设置组件失去焦点，调用对应的校验方法来提示是否在校验。