快捷導(dǎo)航

jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法

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

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

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

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ī)則使用方式

在<head>中除了引入EasyUI的文件之外，還要引入自己的擴(kuò)展文件，順序在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兩個(gè)屬性：

<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">單價(jià):</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">進(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'"</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 校驗(yàn)框validatebox用法

JQuery EasyUI 驗(yàn)證框(ValidateBox)在表單的驗(yàn)證方面給我們提供了很方便的方法

<input id="vv" required="true" validType="email">

屬性

屬性名	類型	描述	默認(rèn)值
required	布爾	定義文本域是否為必填項(xiàng)	false
validType	字符串	定義字段的驗(yàn)證類型比如email, url, etc.	null
missingMessage	字符串	當(dāng)文本框?yàn)榭諘r(shí)提示的文本信息	This field is required
invalidMessage	字符串	當(dāng)文本框內(nèi)容不合法時(shí)提示的文本信息	null

方法

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

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

具體寫法是

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

您可能感興趣的文章:

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

jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具