腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法

更新時間：2016年01月18日 10:17:19 作者：rchm8519

這篇文章主要介紹了jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法的相關(guān)資料,需要的朋友可以參考下

先給大家分享數(shù)據(jù)校驗顯示效果

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

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

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

前端校驗有很多現(xiàn)成的組件，比較好用的有 EasyUI 的 validatebox 插件，提示界面做的相當(dāng)友好，只是validatebox 默認提供的校驗規(guī)則比較有限，有時我們需要添加自己的校驗規(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.' 
} 
}

自定義校驗規(guī)則

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

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

(function($) { 
/** 
* jQuery EasyUI 1.4 --- 功能擴展 
* 
* Copyright (c) 2009-2015 RCM 
* 
* 新增 validatebox 校驗規(guī)則 
* 
*/ 
$.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: '請輸入整數(shù)' 
}, 
checkFloat: { 
validator: function(value, param) { 
return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value); 
}, 
message: '請輸入合法數(shù)字' 
} 
}); 
})(jQuery);

自定義規(guī)則使用方式

在<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	字符串	當(dāng)文本框為空時提示的文本信息	This field is required
invalidMessage	字符串	當(dāng)文本框內(nèi)容不合法時提示的文本信息	null

方法

方法名	參數(shù)	描述
destroy	none	刪除并且銷毀組件
validate	none	做驗證以確定文本框的內(nèi)容是否是有效的
isValid	none	調(diào)用驗證方法并返回驗證結(jié)果，true或者false

注意這里除了required屬性外,若validType屬性失敗.并不會阻止表單提交..所以我們這里如果要阻止表單提交，就又要利用jquery ui提交的表單方法

具體寫法是

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
#form是<form>表單的ID

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具