如何使用jQuery的validate

前言：經過一系列的調查，終於弄清楚了jqgrid的validate的remote用法，用起來很強大，並且很方便，下面進行一些總結

第一步：准備材料jquery.validate.js，加載到你項目中

<script src="js/jquery.validate.js" type="text/javascript"></script>

第二步：先查看一下remote的源碼，你就會明白很多，我是通過firebug進行調查弄清楚的，把關鍵點的注釋寫了出來

// http://docs.jquery.com/Plugins/Validation/Methods/remote
  remote: 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 ) {
    return previous.valid;
   }

   previous.old = value;
   var validator = this;
   this.startRequest(element);
   var data = {};
   data[element.name] = value;
   $.ajax($.extend(true, {
    url: param,// 傳遞的後台url，來進行數據驗證
    mode: "abort",
    port: "validate" + element.name,
    dataType: "json",
    data: data,//傳遞的參數為對應intput標簽對應name和value值
    success: function( response ) {//response為後台返回數據，錯誤的時候返回錯誤提示信息，正確的時候返回true
     validator.settings.messages[element.name].remote = previous.originalMessage;
     var valid = response === true || response === "true";//如果返回true，則會進入到if語句，錯誤提示消失
     if ( valid ) {
      var submitted = validator.formSubmitted;
      validator.prepareElement(element);
      validator.formSubmitted = submitted;
      validator.successList.push(element);
      delete validator.invalid[element.name];
      validator.showErrors();
     } else {
      var errors = {};
      var message = response || validator.defaultMessage( element, "remote" );//如果後台返回有錯誤提示信息，則不會取默認顯示信息
      errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
      validator.invalid[element.name] = true;
      validator.showErrors(errors);
     }
     previous.valid = valid;
     validator.stopRequest(element, valid);
    }
   }, param));
   return "pending";
  }

第三步：在前端進行remote設置，對後台的請求地址傳遞過去

<input type="text" class="required alphanumeric" remote="${ctx}/jade/checkCodeIsExist.do" name="code"/>

第四步：在後台接收參數進行處理，返回對應處理信息，注意，正常的時候返回true，檢驗不通過的時候返回錯誤提示信息

@RequestMapping(value = "checkCodeIsExist")
 public void checkCodeIsExist(HttpServletRequest request, HttpServletResponse reponse) throws Exception {
  Jadeinfo jadeinfo = this.jadeinfoDAO.selectByCodeKey(StrUtil.getUTF8String(request.getParameter("code")));

  if (jadeinfo != null && jadeinfo.getDeleteflag() == 0) {
   out("商品代碼已存在！", reponse);
  } else {
   out(true, reponse);
  }
 }

總結：ok，以上步驟就完成了remote的使用，非常簡便和爽快，但是在我沒有閱讀源碼之前來回的嘗試了很多次，都覺得不是很好用，看源碼還是很值得去做的。好了，上傳一個效果圖吧

------------------------------------------分割線------------------------------------------

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

--------------------------------------分割線 --------------------------------------

jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡