JS表单校验用户名、邮箱、手机号等

做到注册页面的时候需要用到表单校验验证用户的输入是否规范，

表单如下

验证规则为  用户名和密码必须为8--20 位数，邮箱验证格式，手机号验证必须为11位。

js代码如下

<script type="text/javascript">
		/*表单验证*/
		$(function () {


			function checkUsername() {
				// 获取输入框的值
				var username = $("#username").val();
				var reg_username = /^\w{8,20}$/;
				var  flag = reg_username.test(username)
				if (flag){// 符合规则
					$("#username").css("border","1px solid green")
				}
				else {
					$("#username").css("border","1px solid red")
				}
				return flag
			}

			function checkPassword(){
				// 获取输入框的值
				var password = $("#password").val();
				var reg_password = /^\w{8,20}$/;
				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(){
				var email = $("#email").val();
				var reg_email = /^\w+@\w+\.\w+$/;
				var flag = reg_email.test(email)
				if (flag){// 符合规则
					$("#email").css("border","1px solid green")
				}
				else {
					$("#email").css("border","1px solid red")
				}
			}

			function checkName(){

			}

			function checktelephone(){
				var telephone = $("#telephone").val();
				// 手机号必须为11位
				var reg_telephone = /^\w{11}$/;
				var flag = reg_telephone.test(telephone)
				if (flag){// 符合规则
					$("#telephone").css("border","1px solid green")
				}
				else {
					$("#telephone").css("border","1px solid red")
				}
			}


			$("#registerForm").submit(function () {
				return checkUsername()&&checkPassword()&&checkEmail()&&checktelephone();
				// 如果没有返回值或者返回值为true，提交，否则不提交
			})

			// 失去焦点后调用 注意不加括号
			$("#username").blur(checkUsername)
			$("#password").blur(checkPassword)
			$("#email").blur(checkEmail)
			$("#name").blur(checkName)
			$("#telephone").blur(checktelephone)


		})
	</script>

当不符合规则的时候，边框会显示为红色，满足规则后显示为绿色，提交的时候会判断所有的是否符合，全部符合返回true，否则false