表单验证插件 validate （基本表单验证，自定义验证规则）

灰太狼 2022-04-10 01:53 422阅读 0赞

步骤：

(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中

(2) 编写js代码对表单进行验证

表单验证格式：

$("\#form表单").validate(json数据格式);

json数据格式：

\{  
      rules:\{  
            表单项name值:校验规则，  
            表单项name值:校验规则... ...  
      \},  
      messages:\{  
            表单项name值:错误提示信息，  
            表单项name值:错误提示信息... ...  
      \}  
\}

常用校验规则：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70][]

错误信息显示格式：

可以指定error设置错误信息的颜色,例如设置为红色：

.error{
        color:red;
    }

自定义校验规则步骤：

(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params))\{\}

(2) 在rules中通过校验规则名称使用校验规则，在messages中定义该规则对应的错误提示信息

value是input输入的value值

element是校验组件（如：input）的节点对象

![20181219165608781.png][]

params是校验规则的参数如：

"required":true,

![20181219165636204.png][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.validate.min.js" type="text/javascript"></script>
    <script>
        //自定义规则
    	$.validator.addMethod(
             //设置名字
    		"checkUsername",
    		function(value,element,params){
    			var flag = false;
    			$.ajax({
    				"async":false,
    				"url":"${pageContext.request.contextPath}/checkUsername",
    				"data":{"username":value},
    				"type":"POST",
    				"dataType":"json",
    				"success":function(data){
    					flag = data.isExist;
    				}
    			});
                        //当返回false时，出现错误信息
    			return !flag;
    		}
    	
    	);
    
    
    	$(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
    				}
    			},
    			messages:{
    				"username":{
    					"required":"用户名不能为空",
    					"checkUsername":"用户名已存在"
    				},
    				"password":{
    					"required":"密码不能为空",
    					"rangelength":"密码长度6-12位"
    				},
    				"repassword":{
    					"required":"密码不能为空",
    					"rangelength":"密码长度6-12位",
    					"equalTo":"两次密码不一致"
    				},
    				"email":{
    					"required":"邮箱不能为空",
    					"email":"邮箱格式不正确"
    				},
    				"sex":{
    					"required":"没有别的选择"
    				}
    			}
    		});
    	});
    </script>
    <style type="text/css">
    .error{
    	color:red;
    }
    </style>
    </head>
    <body>
    	<form id="myform" action="" method="post">
    		username:<input type="text" name="username" ><br/>
    		password:<input type="text" name="password" ><br/>
    		repassword:<input type="text" name="repassword" ><br/>
    		<input type="text" name="email" ><br/>
    		sex:<br/>
    		<input type="radio" name="sex" >boy<br/>
    		<input type="radio" name="sex" >girl<br/>
    		<label class="error" for="sex" style="display:none;">没有别的选择</label><br/>
    		<input type="submit" value="submit">
    	</form>
    </body>
    </html>

后台：

String username = request.getParameter("username");
                    //数据库查询，如果用户已经存在返回true，否则返回false
    		UserService userServlet = new UserService();
    		boolean isExist = userServlet.checkUsername(username);
    		
                    //需要json格式数据，不能用单引号，必须是\"转译
    		String json = "{\"isExist\":"+isExist+"}";
    		response.getWriter().write(json);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70]: /images/20220404/fef3377163614b9cbbb038cfdfc4b3e8.png
[20181219165608781.png]: /images/20220404/933d26655d644273a4261ba120b2273a.png
[20181219165636204.png]: /images/20220404/76736e229e4d43418f3b7d0227187b94.png