欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery.validate使用詳解

 更新時(shí)間：2016年06月02日 11:58:59   作者：Wang Juqiang  
Ajax在Web應(yīng)用中的作用越來(lái)越大，許多工具都包含了對(duì)這一功能的使用，以下是對(duì)這些常用工具中Ajax的典型實(shí)例.

一、簡(jiǎn)單應(yīng)用實(shí)例：

1.用class樣式進(jìn)行驗(yàn)證，用法簡(jiǎn)單，但不能自定義錯(cuò)誤信息，只能修改jquery-1.4.1.min.js中的內(nèi)置消息，也不支持高級(jí)驗(yàn)證規(guī)則。

<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery.validate.min.js"></script>
<h2>ValidateTest</h2>
<form id="loginForm" action="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
 　　　　<input type="text" id="UserEmail" class="required email" /></td>
  </tr>
  <tr>
   <td>
 　　　　<input type="password" id="Password" class="required" /></td>
  </tr>
  <tr>
   <td>
    <input type="submit" value="submit" onclick="checkInput();" />
   </td>
  </tr>
 </table>
</form>
<script language="javascript" type="text/javascript">
 function checkInput() {
  if ($("#loginForm").valid()) {
   return true;
  }
  return false;
 }
</script>

當(dāng)然，如果不希望使用onclick事件進(jìn)行提交驗(yàn)證，也可以在頁(yè)面加載時(shí)加上jQuery的監(jiān)控，代碼如下：

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

這時(shí)就不需要在提交按鈕上加 onclick="checkInput();"這個(gè)事件了。

2.使用Json字符串驗(yàn)證，使用該規(guī)則驗(yàn)證，必須額外引入jquery.metadata.pack.js文件

修改上面的兩個(gè)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:'請(qǐng)輸入密碼 ',minlength:'密碼至少6位'}}}" />

可以看到，我們已經(jīng)可以自定義錯(cuò)誤消息了。

另外必須在頁(yè)面中加上以下代碼：

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

二、驗(yàn)證規(guī)則的應(yīng)用

1.使用class驗(yàn)證的規(guī)則：

在class中可以使用：required，email，number，url，date，dateISO，dateDE，digits，creditcard，phoneUS

可以增加屬性：minlength，maxlength，min，max，accept，remote（注：請(qǐng)檢查是否返回是bool還是xml），equalTo='#password'

沒(méi)有找到使用辦法的內(nèi)置方法：required(dependency-expression)，required(dependency-callback)，range，rangelength

2.使用Json對(duì)象驗(yàn)證的規(guī)則：

在class中進(jìn)行如下定義：class=“{validate:{required:true,minlength:6,messages:{required:'請(qǐng)輸入密碼',minlength:'密碼太短啦至少6位'}}}”

我們?nèi)钥蛇M(jìn)行以下定義：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'【此處表達(dá)式函數(shù)為required(dependency-expression)】

相比使用class來(lái)說(shuō)，我們已經(jīng)可以使用range方法了，可定義為數(shù)字range:[3,10]，字符串長(zhǎng)度rangelength:[3,10]，remote:url，accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'

沒(méi)有找到使用方法的內(nèi)置方法：required(dependency-callback)

三、高級(jí)驗(yàn)證方法

在前面說(shuō)到的簡(jiǎn)單驗(yàn)證中，使用起來(lái)非常簡(jiǎn)單，有些傻瓜式的味道，但畢竟有些內(nèi)置規(guī)則不能使用。但要想做到靈活運(yùn)用，還是需要通過(guò)JS編碼來(lái)完成。這樣不但所有的內(nèi)置規(guī)則可以使用，而且我們還可以自定義驗(yàn)證規(guī)則。以下實(shí)例我從易到難逐個(gè)列出：

1.編寫(xiě)JS的簡(jiǎn)單方法

仍以登錄驗(yàn)證為例：

<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery.validate.min.js"></script>
<h2>Validate-High</h2>
<form action="" id="loginForm" method="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <input type="text" id="UserEmail" />
   </td>
  </tr>
  <tr>
   <td>
   <input type="password" id="Password" />
   </td>
  </tr>
  <tr>
   <td>
   <input type="submit" value="submit"/>
   </td>
  </tr>
 </table>
</form>

<script language="javascript" type="text/javascript">

$(document).ready(function () {
 var validateOpts = {
  rules: {
   UserEmail: {
    required: true,
    email: true
   },
   Password: {
    required: true 
   }
  },
  messages: {
   UserEmail: {
    required: "請(qǐng)輸入郵箱地址",
    email: "郵箱地址不正確"
   },
   Password: {
    required: "請(qǐng)輸入密碼" 
   }
  }
 };

 $("#loginForm").validate(validateOpts);
});
</script>

我們只需設(shè)置validate的參數(shù)即可。

2.equalTo的使用，一般在注冊(cè)時(shí)會(huì)用到

<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.dbjr.com.cn/Scripts/jquery.validate.min.js"></script>
<h2>ValidateHigh</h2>

<form action="" id="loginForm" method="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <input type="text" id="UserEmail" /> 
   </td>
  </tr>
  <tr>
   <td>
    <input type="password" id="Password" />
   </td>
  </tr>
  <tr>
   <td>
    <input type="password" id="RePassword" />
   </td>
  </tr>
  <tr>
   <td>
    <input type="submit" value="submit"/>
   </td>
  </tr>
 </table>
</form>

<script language="javascript" type="text/javascript">
 $(document).ready(function () {
  var validateOpts = {
   rules: {
    UserEmail: {
     required: true,
     email: true
    },
    Password: {
     required: true
    },
    RePassword: {
     equalTo: "#Password"
    }
   },
   messages: {
    UserEmail: {
     required: "請(qǐng)輸入郵箱地址",
     email: "郵箱地址不正確"
    },
    Password: {
     required: "請(qǐng)輸入密碼"
    },
    RePassword: {
     equalTo: "兩次輸入密碼必須相同"
    }
   }
  };
  $("#loginForm").validate(validateOpts);
 });
</script>

3.required(dependency-callback)的使用，綠色字體。

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

4.自定義規(guī)則，使用addMethod方法，如下：

//方法接收三個(gè)參數(shù)(value,element,param)
//value是元素的值,element是元素本身 param是參數(shù),我們可以用addMethod來(lái)添加除built-in Validation methods之外的驗(yàn)證方法
//比如有一個(gè)字段,只能輸一個(gè)字母,范圍是a-f,寫(xiě)法如下

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

這樣我們就可以在rules中加上這個(gè)規(guī)則，如下

var validateOpts = {
 rules: {
  selectorId: {
   af: ["a","f"]//如果只有一個(gè)參數(shù),直接寫(xiě),如果af:"a",那么a就是這個(gè)唯一的參數(shù),如果多個(gè)參數(shù),用在[]里,用逗號(hào)分開(kāi)
  }
 }
}

另外，經(jīng)過(guò)試驗(yàn)，在Json方式中，我們可以使用af:['a','f']，這個(gè)驗(yàn)證可以起作用，在class方式中，在某個(gè)元素上增加af='af'，驗(yàn)證也可以起到作用。

5.ajax驗(yàn)證，使用remote

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

如果我們驗(yàn)證的方法是返回Boolean類型，這個(gè)方法是沒(méi)有問(wèn)題的。但很多時(shí)候我們可能返回的信息會(huì)更多，或者返回其它類型，這時(shí)我們可以重新定義一個(gè)新的remote方法，示例如下（返回一個(gè)Json對(duì)象）：

$.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 ||"遠(yuǎn)程驗(yàn)證未通過(guò)";
     errors[element.name] = $.isFunction(message) ? message(value) : message;
     validator.showErrors(errors);
    }
    previous.valid = valid;
    validator.stopRequest(element, valid);
   }
  }, param));
  return"pending";
 } elseif (this.pending[element.name]) {
  return"pending";
 }
 return previous.valid;

});

服務(wù)器端方法如下（MVC中）：

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

我們就可以使用jsonremote來(lái)取代remote方法了。當(dāng)然，remote方法依然可以使用。

6.錯(cuò)誤顯示規(guī)則

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
}

以上就是本文的全部?jī)?nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論