Java网站项目(一)----注册页面表单校验

 

1、校验用户名的方法

			//校验用户名
			function checkUsername() {
				alert("校验用户名");
                return true;
                //1.获取用户名
				var username = $("#username").val();
				//2.定义正则 字母开头，允许5-16字节，允许字母数字下划线
				var reg_username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
				//3.判断,给出提示信息
				var flag = reg_username.test(username);
				if (flag){
				    //用户名合法
					$("#username").css("border","");
				}else{
				    //用户名非法,加一个红色边框
					$("#username").css("border","1px solid red");
				}
				return flag;
            }

2、校验密码的方法

            //校验密码
			function checkPassword() {
				//alert("校验密码");
				//1.获取密码值
				var password = $("#password").val();
                //2.定义正则 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
                var reg_password = /^[a-zA-Z]\w{5,17}$/
                //3.判断,给出提示信息
                var flag = reg_password.test(password);
                if (flag){
                    //用户名合法
                    $("#password").css("border","");
                }else{
                    //用户名非法,加一个红色边框
                    $("#password").css("border","1px solid red");
                }
                return flag;
            }

4、校验邮箱

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

            }

5、校验姓名

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

 6、校验手机号

            //校验手机号
            function checkTelephone() {
                //1.获取手机号
                var telephone = $("#telephone").val();
                //2.定义正则  13.........
                var reg_telephone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                //3.判断
                var flag = reg_telephone.test(telephone);
                if (flag){
                    $("#telephone").css("border","");
                }else {
                    $("#telephone").css("border","1px solid red");
                }
                return flag;
            }

7、事件绑定

            $(function () {
				//当表单提交时，调用所有的校验方法
				$("#registerForm").submit(function () {
					return checkUsername()
						&& checkPassword()
						&& checkEmail()
						&& checkName()
						&& checkTelephone();
					//如果这个方法没有返回值,或者返回值为true,则表单提交,如果返回false,则表单不提交
                });

                //当某一个组件失去焦点时，调用对应的校验方法
				$("#username").blur(checkUsername);
				$("#password").blur(checkPassword);
				$("#email").blur(checkEmail);
				$("#name").blur(checkName);
				$("#telephone").blur(checkTelephone);
            });