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

╰半橙微兮° 2022-06-05 07:39 136阅读 0赞

以前使用原生的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:\{\}//错误提示信息

\});

规则如下：

![Image 1][]

有些规则上面没有就需要自己定义，比如身份证号码，这个插件是国外的人写的，他们的身份证号跟我们不一样啊；还可以自定义用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)\{

//需要自定义的函数

);

[Image 1]: