jquery validate remote扩展使用

港控/mmm° 2022-05-17 00:11 170阅读 0赞

jquery的validate功能可以方便的用来验证前端数据，有些时候验证数据需要提交后端进行验证，可以使用validate的remote的功能，代码如下：

$('\#firstForm').validate(\{  
rules: \{  
account: \{  
hasselected: true  
\},  
amount: \{  
required: true,  
isValidAmount: true,  
maxlength: 13

\},  
validatecode:\{  
required:true,  
remote:\{  
type:"POST",  
url:"",  
date:\{name:function()\{return $("\#validate").val();\}\}

\},  
\},

messages: \{  
account: \{  
hasselected: "请选择帐号！"  
\},  
amount: \{  
required: "金额不能为空！",  
isValidAmount: "金额输入错误，请重新输入！",  
maxlength: "金额已超出最大长度"  
\},  
validatecode:\{  
required:"未填写验证码!",  
remote:jQuery.format("验证码错误")  
\}  
\},  
errorElement: "span",  
errorPlacement: function (error, element) \{  
//查找到需要容纳并显示错误信息的dom元素  
//var attentionElement = $(element).next().children('.ui-tiptext-error');  
var attentionElement = $(element).parent().parent().find('.ui-tiptext-error');  
attentionElement.show();  
//传过来的error是包含span标签的错误信息，如果要去掉标签，用正则表达式即可  
attentionElement.find("span").html(error);  
\},  
showErrors: function (errorMap, errorList) \{  
if (errorList && errorList.length > 0) \{  
$.each(errorList, function (index, obj) \{  
$(obj.element).parent().next().children('.ui-tiptext-error').show();  
\});  
this.defaultShowErrors();  
\} else \{  
$(this.currentElements).parent().next().children('.ui-tiptext-error').hide();  
\}  
\},  
onkeyup: false,  
focusInvalid: false  
\});

但是这样使用时候url返回值必须为true和false，否则就需要自定义扩展，定义verifyValidate方法

$('\#firstForm').validate(\{  
rules: \{  
account: \{  
hasselected: true  
\},  
amount: \{  
required: true,  
isValidAmount: true,  
maxlength: 13

\},  
validatecode:\{  
required:true,  
verifyValidate:true

\},  
\},

jQuery.validator.addMethod("verifyValidate", function(value, element) \{  
var flag = true;  
// ajax获取  
$.ajax(\{  
type : 'POST',  
url : "",  
dataType : 'json',  
async : false,  
cache : false,  
data : "valid=" + value,  
success : function(data) \{  
console.log("验证验证码" + data);  
var code = data.code;  
if(code=='00000')\{  
flag = true;  
\}else if(code=='00001')\{  
flag = false;  
$('\#img').attr('src', '/url?' + new Date().getTime());  
$('\#msg').html("验证码已失效");  
$('.msg').show();  
\}else if(code=='00002')\{  
flag = false;  
$('\#img').attr('src', '/url?' + new Date().getTime());  
$('\#msg').html("验证码错误");  
$('.msg').show();  
\}  
\}  
\});  
return flag;  
\}, "");