工作總結篇：如何使用jquery的validate，jqueryvalidate

工作總結篇：如何使用jquery的validate，jqueryvalidate

前言：經過一系列的調查，終於弄清楚了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/remoteremote: 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為後台返回資料，錯誤的時候返回錯誤提示資訊，正確的時候返回truevalidator.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的使用，非常簡便和爽快，但是在我沒有閱讀源碼之前來回的嘗試了很多次，都覺得不是很好用，看源碼還是很值得去做的。好了，上傳一個吧