jQuery外掛程式EasyUI校正規則 validatebox驗證框_jquery

Web前端資料校正組件

Web項目中用戶端與服務端的互動離不開Form表單，Form表單中最常用的元素莫過於input標籤，input標籤首先要用的肯定是text文字框啦！

input文字框允許使用者任意輸入，難免會會有使用者輸入一些不符合規定的資料，此時，在提交之前對資料校正是很有必要的，如果等到提交到服務端再校正就會大大降低使用者體驗啦。

前端校正有很多現成的組件，比較好用的有 EasyUI 的 validatebox 外掛程式，提示介面做的相當友好，只是validatebox 預設提供的校正規則比較有限，有時我們需要添加自己的校正規則。

rules: {  email:{  validator: function(value){   return ...?$/i.test(value);  },  message: 'Please enter a valid email address.'  },  url: {  validator: function(value){   return ...?$/i.test(value);  },  message: 'Please enter a valid URL.'  },  length: {  validator: function(value, param){   var len = $.trim(value).length;   return len >= param[0] && len <= param[1]  },  message: 'Please enter a value between {0} and {1}.'  },  remote: {  validator: function(value, param){   var data = {};   data[param[1]] = value;   var response = $.ajax({   url:param[0],   dataType:'json',   data:data,   async:false,   cache:false,   type:'post'   }).responseText;   return response == 'true';  },  message: 'Please fix this field.'  } },

自訂校正規則

添加新的校正規則時最好不要在EasyUI的源檔案中進行，第一是避免因誤操作而導致汙染了EasyUi源碼，更重要的是考慮到以後容易進行組件升級。所以最合理的辦法是單獨寫自己的擴充檔案。

比如：我在原有規則的基礎上新增了以下三項校正，單獨檔案 easyui-extend-rcm.js：

(function($) { /** * jQuery EasyUI 1.4 --- 功能擴充 *  * Copyright (c) 2009-2015 RCM * * 新增 validatebox 校正規則 * */ $.extend($.fn.validatebox.defaults.rules, { idcard: {  validator: function(value, param) {  return idCardNoUtil.checkIdCardNo(value);  },  message: '請輸入正確的社會安全號碼碼' }, checkNum: {  validator: function(value, param) {  return /^([0-9]+)$/.test(value);  },  message: '請輸入整數' }, checkFloat: {  validator: function(value, param) {  return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);  },  message: '請輸入合法數字' } });})(jQuery);

自訂規則使用方式
在中除了引入EasyUI的檔案之外，還要引入自己的擴充檔案，順序在EasyUI檔案之後：
<pre name="code" class="javascript"><span style="font-size:18px;"><script src="#WEBROOT

()/static/jseasyui/jquery.easyui.min.js" type="text/javascript" ></script><script src="#WEBROOT()/static/js/comm/easyui-extend-rcm.js" type="text/javascript"></script></span></pre><pre class="brush:java;"></pre>然後在Html中如下引用即可，一定要加Class 和 data-options兩個屬性：<br><br><p></p><pre class="brush:java;"><pre name="code" class="<a href=" http:="" www.jb51.net="" kf="" qianduan="" css="" "="" target="_blank">html"><span style="font-size:18px;"><div id="dlg" class="easyui-dialog" style="width:300px; height:300px; vertical-align: middle;" closed="true" title="'添加中藥'" buttons="#dlg-buttons"> <div id="editForm" style="background:'';padding:20px;width:200px;height:200px; display:none;"> <form id="form" method="post">  <div style="padding-left:16px;padding-top:20px;" hidden="true">  <input type="text" name="dlg_drugId" id="dlg_drugId" hidden="true">  </div>  <div style="padding-top:10px;padding-left:40px;">  <label for="dlg_name">藥物:</label>  <input type="text" name="dlg_name" id="dlg_name" class="easyui-validatebox" readonly="readonly">  </div>  <div style="padding-top:10px;padding-left:40px;">  <label for="dlg_price">單價:</label>  <input type="text" name="dlg_price" id="dlg_price" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="required:true,validType:'checkFloat'" />  </div>  <div style="padding-top:10px;padding-left:40px;">  <label for="dlg_purchase_price">進價:</label>  <input type="text" name="dlg_purchase_price" id="dlg_purchase_price" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkFloat'" />  </div>  <div style="padding-top:10px;padding-left:40px;">  <label for="dlg_stock">庫存:</label>  <input type="text" name="dlg_stock" id="dlg_stock" <span="" style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkNum'" />  </div>  <div style="padding-top:10px;padding-left:40px;" align="center">  <input type="button" value="儲存" onclick="saveTCMDrugPublicMapped()" class="bt_style">  </div> </form> </div></div></span></pre><br><br><p></p><pre class="brush:java;"></pre><p></p><h1>資料校正顯示效果</h1><p>效果如下圖所以：</p><p><img src="20150130/20150130084015121.png" alt="" style="width: 378px; height: 213px;"><br></p>   </pre>

希望通過這篇文章的學習對jQuery EasyUI validatebox校正規則更加瞭解。