jquery.validate使用详解

<script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js">

当然，如果不希望使用onclick事件进行提交验证，也可以在页面加载时加上jQuery的监控，代码如下：


$(document).ready(function () {
 jQuery("#loginForm").validate();
});


这时就不需要在提交按钮上加 onclick="checkInput();"这个事件了。
2.使用Json字符串验证，使用该规则验证，必须额外引入jquery.metadata.pack.js文件
修改上面的两个INPUT如下：


<input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />
<input type="password" id="Password" class="{validate:{required:true,minlength:6,messages:{required:'请输入密码 ',minlength:'密码至少6位'}}}" />


可以看到，我们已经可以自定义错误消息了。
另外必须在页面中加上以下代码：




$(document).ready(function () {
 $("#loginForm").validate({
  meta: "validate"
 });
});


二、验证规则的应用
1.使用class验证的规则：
在class中可以使用：required，email，number，url，date，dateISO，dateDE，digits，creditcard，phoneUS
可以增加属性：minlength，maxlength，min，max，accept，remote（注：请检查是否返回是bool还是xml），equalTo='#password'
没有找到使用办法的内置方法：required(dependency-expression)，required(dependency-callback)，range，rangelength
2.使用Json对象验证的规则：
在class中进行如下定义：class=“{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”
我们仍可进行以下定义：number:true, email:true, url:true, date:true, dateISO:true, dateDE:true, digits:true, creditcard:true, phoneUS:true
min:3, max:10, minlength:3, maxlength:10，required: '#other:checked'【此处表达式函数为required(dependency-expression)】
相比使用class来说，我们已经可以使用range方法了，可定义为数字range:[3,10]，字符串长度rangelength:[3,10]，remote:url，accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'
没有找到使用方法的内置方法：required(dependency-callback)
三、高级验证方法
在前面说到的简单验证中，使用起来非常简单，有些傻瓜式的味道，但毕竟有些内置规则不能使用。但要想做到灵活运用，还是需要通过JS编码来完成。这样不但所有的内置规则可以使用，而且我们还可以自定义验证规则。以下实例我从易到难逐个列出：
1.编写JS的简单方法
仍以登录验证为例：


<script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js">

我们只需设置validate的参数即可。
2.equalTo的使用，一般在注册时会用到


<script type="text/javascript" language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js">

3.required(dependency-callback)的使用，绿色字体。




var validateOpts = {
 rules: {
  age: {
   required: true,
   min: 3
  },
  parent: {
   required: function (element) {
    return $("#age").val() < 13;
   }
  }
 }
}




4.自定义规则，使用addMethod方法，如下：
//方法接收三个参数(value,element,param)

//value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法

//比如有一个字段,只能输一个字母,范围是a-f,写法如下


$.validator.addMethod("af", function (value, element, params) {
 if (value.length >1) {
  returnfalse;
 }
 if (value >=params[0] && value <=params[1]) {
  returntrue;
 } else {
  returnfalse;
 }
}, "必须是一个字母,且a-f");


这样我们就可以在rules中加上这个规则，如下




var validateOpts = {
 rules: {
  selectorId: {
   af: ["a","f"]//如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
  }
 }
}


另外，经过试验，在Json方式中，我们可以使用af:['a','f']，这个验证可以起作用，在class方式中，在某个元素上增加af='af'，验证也可以起到作用。
5.ajax验证，使用remote


remote: {
 url:"CheckEmail",
 type:"post",
 dataType:"json"
}


如果我们验证的方法是返回Boolean类型，这个方法是没有问题的。但很多时候我们可能返回的信息会更多，或者返回其它类型，这时我们可以重新定义一个新的remote方法，示例如下（返回一个Json对象）：


$.validator.addMethod("jsonremome", function (value, element, param) {
 if (this.optional(element))
  return"dependency-mismatch";

 var previous =this.previousValue(element);
 if (!this.settings.messages[element.name])
  this.settings.messages[element.name] = {};

 previous.originalMessage =this.settings.messages[element.name].remote;
 this.settings.messages[element.name].remote = previous.message;

 param =typeof param =="string"&& { url: param} || param;

 if (previous.old !== value) {

  previous.old = value;
  var validator =this;
  this.startRequest(element);
  var data = {};
  data[element.name] = value;

  $.ajax($.extend(true, {
   url: param,
   mode: "abort",
   port: "validate"+ element.name,
   dataType: "json",
   data: data,
   success: function (response) {
    validator.settings.messages[element.name].remote = previous.originalMessage;
    //var valid = response === true;
    var valid = response.Result ===true;
    if (valid) {
     var submitted = validator.formSubmitted;
     validator.prepareElement(element);
     validator.formSubmitted = submitted;
     validator.successList.push(element);
     validator.showErrors();
    } else {
     var errors = {};
     //var message = (response.Message || validator.defaultMessage(element, "jsonremote"));
     var message = response.Message ||"远程验证未通过";
     errors[element.name] = $.isFunction(message) "pending";
 } elseif (this.pending[element.name]) {
  return"pending";
 }
 return previous.valid;

});




服务器端方法如下（MVC中）：




public JsonResult CheckEmail(string UserEmail)
{
 returnnew JsonResult { Data =new { Result =false, Message="Please change the filed" } };
}


我们就可以使用jsonremote来取代remote方法了。当然，remote方法依然可以使用。
6.错误显示规则


var validateOpts = {
 wrapper: "div",// default has no wrapper
 errorClass: "invalid", // the default value is error
 errorElement: "em", // default value is lable
 errorLabelContainer: "#messageBox", // to gather all the error messages
}


以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持。

                                
                                

                                    jquery.validate,class,json,required,equalTo 
                                

                                    标签：
                                        
jquery.validate,class,json,required,equalTo