jQuery easyui的validatebox校驗規則擴充及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> 

然後在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