使用easyUI中的jquery.validate.min.js插件进行表单验证并自定义校验规则

本文链接：https://blog.youkuaiyun.com/qq_38890137/article/details/78594350

以前使用原生的js或者jQuery写表单验证真的好麻烦，使用上面的easyUI插件配合着ajax真的节省好多代码量

直接上代码

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>页面层</title>
		<link rel="stylesheet" href="css/layout.css" />
		
		<script type="text/javascript">
			function formReset(){
				document.getElementById("SubmitForm").reset();
			}
			
			function showTips(id,info){
			document.getElementById(id+"span").innerHTML="<font color='grey' size='2'>"+info+"</font>";
		}
		
		 function check(id,info){
		 	//获取用户输入的值
		 var uVlaue=document.getElementById(id).value;
		 //进行校验
		 if(uVlaue==""){
		 	document.getElementById(id+"span").innerHTML="<font color='red' size='2'>"+info+"</font>";
		 }else{
		 	document.getElementById(id+"span").innerHTML=" ";
		 }
		 }
		</script>
		
	</head>
	<body>
		
		<div  class="head">
			<h1>注册</h1>
			
		</div>
		<form action="${pageContext.request.contextPath }/login" method="post" class="SubmitForm" id="SubmitForm">
			
			学      号 <input type="text" name="number" size="35px" id="number" οnfοcus="showTips('number','学号必填!')" οnblur="check('number','学号不能为空！')"/> <span id="numberspan"></span><br />
			姓      名 <input type="text" name="username" size="35px" id="username" οnfοcus="showTips('username','用户名必填!')" οnblur="check('username','用户名不能为空！')"/> <span id="userspan"></span><br />
			<span style="margin-right: 150px; text-align: left;">性      别</span><input  type="radio" name="sex" />男      <input type="radio" name="sex" />女 <br />
			所在学院 <input type="text" name="xueyuan" id="xueyuan" size="35px" οnfοcus="showTips('xueyuan','学院名必填！')" οnblur="check('xueyuan','学院名不能为空！')" /><span id="xueyuanspan"></span><br />
			密      码 <input type="password" size="35px" name="password" id="password" οnfοcus="showTips('password','密码必填！')" οnblur="check('password','密码不能为空！')" placeholder="请输入密码"/><span id="passwordspan"></span><br />
			确认密码 <input type="password" name="repassword" id="repassword" size="35px" οnfοcus="showTips('repassword','确认密码')" οnblur="check('repassword','确认密码不能为空！')" placeholder="请确认密码"/><span id="repasswordspan"></span><br />
			<input type="submit" value="确认" class="button"/>            <input type="button" οnclick="formReset()" value="重置"> 
			
			
		</form>
		
	</body>
</html>

真的好麻烦。。。。。。jQuery和js也不是很会用。所以还是学会上面的表单校验在使用下面的插件吧，路有一步步走！

好了，大招来了直接上代码

jQuery引入jquery.validate.min.js

$(function(){
	$("#myform").validate({
		rules:{
			"username":{
				"required":true,
				"checkUsername":true
			},
			"password":{
				
				"required":true,
				"rangelength":[6,12]
			},
			"repassword":{
				"required":true,
				"rangelength":[6,12],
				"equalTo":"#password"
			},
			"email":{
				"required":true,
				"email":true
			},
			"sex":{
				"required":true
			},
			"name":{
				"required":true
			},
			"birthday":{
				"required":true,
				"dateISO":true
			}
			
		},
		
		messages:{
			"username":{
				"required":"用户名不能为空",
				"checkUsername":"该用户已存在"
			},
			"password":{
				"required":"密码不能为空",
				"rangelength":"密码长度6-12位"
			},
			"repassword":{
				"required":"确认密码不能为空",
				"rangelength":"密码长度6-12位",
				"equalTo":"两次密码不一致"
			},
			"email":{
				"required":"邮箱不能为空",
				"email":"邮箱格式不正确"
			},
			"sex":{
				"required":"没有第三个选项"
			},
			"name":{
				"required":"姓名不能为空"
			},
			"birthday":{
				"required":"日期不能为空",
				"dateISO":"日期格式不正确"
			}
			
		}
		
	});
});

格式就是json的格式键值对 key：value

$(function(){

$("表单的id").validate({

rules:{}, //规则

message:{} //错误提示信息

});

规则如下：

有些规则上面没有就需要自己定义，比如身份证号码，这个插件是国外的人写的，他们的身份证号跟我们不一样啊；还可以自定义用json检验用户名是否存在

直接上代码

	//自定义校验规则
	$.validator.addMethod(
		//规则的名称
		"checkUsername",
		
		//校验的函数
		function (value,element,params){
			
			//定义一个标志符true或者false都没有关系只是定义
			var flag=true;
			
			//value:输入的内容
			//element:被校验的元素对象
			//params:规则对应的参数值
			$.ajax({
				"async":false ,//是否异步
				"url":"${pageContext.request.contextPath}/checkUsername",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag=data.isExist;
					//alert(flag);

				}

			});
		//返回false表示校验器不通过
		
		return !flag;
		}
	
	);

语法就是

//自定义检验规则

$.validator.addMethod(

//规则的名称

"checkUsername",

//检验的函数

function(vlaue,element,params){

//需要自定义的函数

}

);