自定义注册、登录的校验规则(自定义validate校验规则)

在做项目时,有一个校验用户信息的步骤,分为前端校验和后台校验,前端校验已经存在了许多插件方便了我们的使用,如validate。然而有些时候我们要用的校验规则插件中并没有,这就需要我们自定义校验规则了。接下来讲述一下validate的使用和自定义规则进行验证。
validate进行表单验证的格式为:$("form表单的选择器”).validate(json数据格式);
json数据格式如下所示:

rules:{
表单项name值:{校验规则},
表单项name值:{校验规则},

},
messages:{
表单项name值:{错误提示信息},
表单项name值:{错误提示信息},

}

代码如下所示:

$("#myform").validate({
			rules:{
				"username":{
					"required":true,
				},
				"password":{
					"required":true,
					"rangelength":[6,12]
				},
				"repassword":{
					"required":true,
					"rangelength":[6,12],
					"equalTo":"#password"
				}
			},
			messages:{
				"username":{
					"required":"用户名不能为空",
				},
				"password":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位"
				},
				"repassword":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位",
					"equalTo":"两次密码不一致"
				}
			}
		});

比如现在我要进行注册,要验证我注册的用户名是否已经存在。如上述代码中表示validate中已存在required,rangelength等规则,在查询validate的官方文档后发现并没有校验用户名是否已存在的规则,此时就需要我们自定义规则了。
validate的自定义校验规则如下:
$.validator.addMethod("校验规则名称”,function(value,element,params)){};
以添加校验用户名是否已存在为例(代码如下):

//自定义校验规则
	$.validator.addMethod(
		//校验规则的名称
		"checkUsername",
		//校验的函数
		function(value,element,params){   
		    //value:输入的内容,即获取到输入的值
			//element:被校验的元素对象,即节点
			//params:规则对应的参数值
			//定义一个标志
			var flag = false;			
			//校验方法:采用ajax对输入的username进行校验
			$.ajax({
				"async":false, //这里false表示同步提交数据,否则flag的值不会改变
			    "url":"${pageContext.request.contextPath}/checkUsername",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag = data.isExist;
				}
			});
			//仅当!flag=true时校验器才表示通过校验,否则就会显示错误提示。
			return !flag;
		}
	);

上述代码大意就是给validate添加了一个叫checkUsername的方法用于校验用户名是否存在,通过ajax提交数据用于验证。接下来就是使用了:

$(function() {
		$("#myform").validate({
			rules:{
				"username":{
					"required":true,
					"checkUsername":true
				}
			},
			messages:{
				"username":{
					"required":"用户名不能为空",
					"checkUsername":"用户名已存在"
				}
			}
		});

你可能感兴趣的:(个人总结,前端学习记录)