成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

Web前端數(shù)據(jù)校驗(yàn)組件

Web項(xiàng)目中客戶端與服務(wù)端的交互離不開Form表單，F(xiàn)orm表單中最常用的元素莫過于input標(biāo)簽，input標(biāo)簽首先要用的肯定是text文本框啦！

input文本框允許用戶任意輸入，難免會(huì)會(huì)有用戶輸入一些不符合規(guī)定的數(shù)據(jù)，此時(shí)，在提交之前對(duì)數(shù)據(jù)校驗(yàn)是很有必要的，如果等到提交到服務(wù)端再校驗(yàn)就會(huì)大大降低用戶體驗(yàn)啦。

前端校驗(yàn)有很多現(xiàn)成的組件，比較好用的有 EasyUI 的 validatebox 插件，提示界面做的相當(dāng)友好，只是validatebox 默認(rèn)提供的校驗(yàn)規(guī)則比較有限，有時(shí)我們需要添加自己的校驗(yàn)規(guī)則。

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.'
  }
 },

自定義校驗(yàn)規(guī)則

添加新的校驗(yàn)規(guī)則時(shí)最好不要在EasyUI的源文件中進(jìn)行，第一是避免因誤操作而導(dǎo)致污染了EasyUi源碼，更重要的是考慮到以后容易進(jìn)行組件升級(jí)。所以最合理的辦法是單獨(dú)寫自己的擴(kuò)展文件。

比如：我在原有規(guī)則的基礎(chǔ)上新增了以下三項(xiàng)校驗(yàn)，單獨(dú)文件 easyui-extend-rcm.js：

(function($) {
 /**
 * jQuery EasyUI 1.4 --- 功能擴(kuò)展
 * 
 * Copyright (c) 2009-2015 RCM
 *
 * 新增 validatebox 校驗(yàn)規(guī)則
 *
 */
 $.extend($.fn.validatebox.defaults.rules, {
 idcard: {
  validator: function(value, param) {
  return idCardNoUtil.checkIdCardNo(value);
  },
  message: '請(qǐng)輸入正確的身份證號(hào)碼'
 },
 checkNum: {
  validator: function(value, param) {
  return /^([0-9]+)$/.test(value);
  },
  message: '請(qǐng)輸入整數(shù)'
 },
 checkFloat: {
  validator: function(value, param) {
  return /^[+|-]?([0-9]+.[0-9]+)|[0-9]+$/.test(value);
  },
  message: '請(qǐng)輸入合法數(shù)字'
 }
 });
})(jQuery);

自定義規(guī)則使用方式
在中除了引入EasyUI的文件之外，還要引入自己的擴(kuò)展文件，順序在EasyUI文件之后：
<pre name="code" class="javascript"><span style="font-size:18px;"><script src="http://www.gimoo.net/t/1904/5cb58b81ea0c6.html" type="text/javascript" ></script> <script src="http://www.gimoo.net/t/1904/5cb58b81ea0c6.html" type="text/javascript"></script></span></pre> <pre class="brush:java;"></pre> 然后在Html中如下引用即可，一定要加Class 和 data-options兩個(gè)屬性：<br> <br> <p></p><pre class="brush:java;"><pre name="code" class="<a href="http://www.gimoo.net/t/1904/ http:="" www.gimoo.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">單價(jià):</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">進(jìn)價(jià):</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>數(shù)據(jù)校驗(yàn)顯示效果</h1> <p>效果如下圖所以：</p> <p><img src="http://www.gimoo.net/t/1904/20150130/20150130084015121.png" alt="" style="width: 378px; height: 213px;"><br> </p> </pre>

希望通過這篇文章的學(xué)習(xí)對(duì)jQuery EasyUI validatebox校驗(yàn)規(guī)則更加了解。