js完成表单校验--初级

	<script>
            /**
			 * js完成表单校验
			 * 		用户名：长度8到20位,英文字符或者数字
			 * 		密码		长度8到20位 ，英文字符或者数字
			 * 		email：邮件格式
			 * 		姓名：不为空
			 * 		手机号：11位
			 * 		出生日期：不为空
			 * 		验证码：不为空
             */


            /**
			 * 当某一个输入框失去焦点去验证当前输入框
			 * 提交表单时验证全部信息
             */

            //校验用户名：长度8到20位 ，英文字符或者数字
            function checkUsername(){
				//1.获取
				var username = $("#username").val();
				//2.定义正则表达式
				var reg_username = /^\w{8,20}$/;
				//3.判断
				var flag = reg_username.test(username);
				if (flag){
				    //表示合法
                    $("#username").css("border","1px solid green");

				}else{
				    //不合法,修改输入框的颜色为红色
					$("#username").css("border","1px solid red")

				}
				return flag;
			}

			//校验密码：长度8到20位 ，英文字符或者数字
			function checkPassword(){
                //1.获取
                var password = $("#password").val();
                //2.定义正则表达式
                var reg_password = /^\w{8,20}$/;
                //3.判断
                var flag = reg_password.test(password);
                if (flag){
                    //表示合法
                    $("#password").css("border","1px solid green");

                }else{
                    //不合法,修改输入框的颜色为红色
                    $("#password").css("border","1px solid red")

                }
                return flag;
			}

			//校验邮箱：邮箱格式
            function checkEmail(){
                //1.获取
                var email = $("#email").val();
                //2.定义正则表达式  lisen@163.com
                // var reg_email = /^\w+@\w+\.\w+$/;
                var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                //3.判断
                var flag = reg_email.test(email);
                if (flag){
                    //表示合法
                    $("#email").css("border","1px solid green");

                }else{
                    //不合法,修改输入框的颜色为红色
                    $("#email").css("border","1px solid red")

                }
                return flag;
            }

            //校验姓名：非空
            function checkName(){
                //1.获取
				var name = $("#name").val();
				var flag;
				//判断
				if (name == null || name == "" || name == "undefined"){
				    //名字输入不合法
                    $("#name").css("border","1px solid red")
					flag = false;
                }else{
                    //表示合法
                    $("#name").css("border","1px solid green");
                    flag = true;
				}
				return flag;

            }

            //校验手机号：11位数字
            function checkTelephone(){
                //1.获取
                var telephone = $("#telephone").val();
                //2.定义正则表达式
                // var reg_telephone = /^\w+@\w+\.\w+$/;
                var reg_telephone = /^(13[0-9]|14[5|7]|15[0|1|2|3|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","1px solid green");

                }else{
                    //不合法,修改输入框的颜色为红色
                    $("#telephone").css("border","1px solid red")

                }
                return flag;
            }

            //校验出生日期：不为空
            function checkBirthday(){
                //1.获取
                var birthday = $("#birthday").val();
                var flag;
                //判断
                if (birthday == null || birthday == "" || birthday == "undefined"){
                    //名字输入不合法
                    $("#birthday").css("border","1px solid red")
                    flag = false;
                }else{
                    //表示合法
                    $("#birthday").css("border","1px solid green");
                    flag = true;
                }
                return flag;

            }

            //校验验证码：非空
            function checkCode(){
                //1.获取
                var check = $("#check").val();
                var flag;
                //判断
                if (check == null || check == "" || check == "undefined"){
                    //名字输入不合法
                    $("#check").css("border","1px solid red")
                    flag = false;
                }else{
                    //表示合法
                    $("#check").css("border","1px solid green");
                    flag = true;
                }
                return flag;

            }



            $(function(){

                //当某一个组件失去对应的焦点时，调用对应的校验方法
                $("#username").blur(function(){
                    checkUsername();
                })

				//密码输入框失去焦点
                $("#password").blur(function(){
                    checkPassword();
                })
				//密码输入框失去焦点，和上面一样
                $("#email").blur(checkEmail);
                //姓名输入框失去焦点，和上面一样
                $("#name").blur(checkName);
                //手机号输入框失去焦点，和上面一样
                $("#telephone").blur(checkTelephone);
                //出生日期输入框失去焦点，和上面一样
                $("#birthday").blur(checkBirthday);
                //验证码输入框失去焦点，和上面一样
                $("#check").blur(checkCode);






                //获取表单对象，提交表单校验
                $("#registerForm").submit(function(){
                    //调用校验用户名的方法
                    return checkUsername() && checkPassword  && checkEmail() && checkBirthday() && checkCode() && checkName() && checkTelephone();
                })


			})
		</script>