小项目模板--表单本地合法性校验，纯js部分（基于JQuery框架）

0x01.功能

• 本地对表单的合法性校验。
• 失去焦点立即校验，给出边框颜色提示。
• 当提交时，对不符合条件的给出弹窗提示。

0x02.效果展示

0x03.调用说明

• 基于JQuery框架。
• id名称如代码所示。
• 校验的限制格式如代码所示。

0x04.代码

<!--导入jquery-->
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			/*
			* 表单校验
			* 	1.用户名：单词字符，长度8-12位
			* 	2.密码：单词字符，长度8-12位
			* 	3.email：邮件格式
			* 	4.姓名：非空
			* 	5.手机号：手机号格式
			* 	6.出生日期：非空
			* 	7.验证码：非空
			* */
			//用户名格式的校验
			function checkUsername() {
				//1.获取用户名
				var username = $("#username").val();
				//2.正则定义--(8-20位单词字符)
				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;
			}
			//密码格式的检验
			function checkPassword() {
				//1.获取密码
				var password = $("#password").val();
				//2.正则定义--(8-20位单词字符)
				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.正则定义--(包含 @ . )
				var reg_email=/^\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(){
				var name=$("#name").val();
				var flag=(name!="");//非空判断
				if(flag){
					//合法提示：边框变绿
					$("#name").css("border","1px solid green");
				}else{
					//非法提示：边框变红
					$("#name").css("border","1px solid red");
				}
				return flag;
			}
			function checkTelephone(){
				var telephone=$("#telephone").val();
				//以1开头，第二位可能是3/4/5/7/8等的任意一个，在加上后面的\d表示数字[0-9]的9位，总共加起来11位结束。
				var reg_telephone=/^1(3|4|5|7|8)\d{9}$/;
				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(){
				var birthday=$("#birthday").val();
				var flag=(birthday!="");//非空判断
				if(flag){
					//合法提示：边框变绿
					$("#birthday").css("border","1px solid green");
				}else{
					//非法提示：边框变红
					$("#birthday").css("border","1px solid red");
				}
				return flag;
			}
			function checkCheck(){
				var check=$("#check").val();
				var flag=(check!="");
				if(flag){
					//合法提示：边框变绿
					$("#check").css("border","1px solid green");
				}else{
					//非法提示：边框变红
					$("#check").css("border","1px solid red");
				}
				return flag;
			}
			$(function () {
				//表单一提交，调用所有校验方法
				$("#registerForm").submit(function () {
					if(!checkUsername()){
						alert("您的用户名格式不正确，请输入8-20个单词字符！");
						return false;
					}
					if(!checkPassword()){
						alert("您的密码格式不正确，请输入8-20个单词字符！");
						return false;
					}
					if(!checkEmail()){
						alert("您的邮箱格式不正确，请重新输入！");
						return false;
					}
					if(!checkName()){
						alert("您的名字为空，请重新输入！");
						return false;
					}
					if(!checkTelephone()){
						alert("您的手机号格式不正确，请输入正确的手机号！");
						return false;
					}
					if(!checkBirthday()){
						alert("您还未输入出生日期，请重新输入！");
						return false;
					}
					if(!checkCheck()){
						alert("您还未输入验证码，请重新输入！");
						return false;
					}
					return true;
				});
				//当某个组件失去焦点后，同样调用校验方法
				$("#username").blur(checkUsername);
				$("#password").blur(checkPassword);
				$("#email").blur(checkEmail);
				$("#name").blur(checkName);
				$("#telephone").blur(checkTelephone);
				$("#birthday").blur(checkBirthday);
				$("#check").blur(checkCheck);
			});

		</script>

ATFWUS --Writing By 2020–04-11