先給大家分享數據校驗顯示效果
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); 自定義規則使用方式
在<head>中除了引入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>
然后在Html中如下引用即可，一定要加Class 和 data-options兩個屬性：
<pre name="code" class="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'"</span> /> </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'"</span> /> </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'"</span> /> </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>
詳解jQuery easyui 校驗框validatebox用法
JQuery EasyUI 驗證框(ValidateBox)在表單的驗證方面給我們提供了很方便的方法
<input id="vv" required="true" validType="email">
屬性
| 屬性名 | 類型 | 描述 | 默認值 |
| required | 布爾 | 定義文本域是否為必填項 | false |
| validType | 字符串 | 定義字段的驗證類型比如email, url, etc. | null |
| missingMessage | 字符串 | 當文本框為空時提示的文本信息 | This field is required |
| invalidMessage | 字符串 | 當文本框內容不合法時提示的文本信息 | null |
方法
| 方法名 | 參數 | 描述 |
| destroy | none | 刪除并且銷毀組件 |
| validate | none | 做驗證以確定文本框的內容是否是有效的 |
| isValid | none | 調用驗證方法并返回驗證結果，true或者false |
注意這里除了required屬性外,若validType屬性失敗.并不會阻止表單提交..所以我們這里如果要阻止表單提交，就又要利用jquery ui提交的表單方法
具體寫法是
$(":submit").click(function(){if(!$("#form").form('validate')){return false;}})#form是<form>表單的ID新聞熱點
疑難解答
