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表單中最常用的元素莫過(guò)于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">庫(kù)存:</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
您可能感興趣的文章:
- jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能
- jQuery Validate 校驗(yàn)多個(gè)相同name的方法
- jquery 正整數(shù)數(shù)字校驗(yàn)正則表達(dá)式
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- jQuery插件Validate實(shí)現(xiàn)自定義校驗(yàn)結(jié)果樣式
- jQuery中校驗(yàn)時(shí)間格式的正則表達(dá)式小結(jié)
- jquery對(duì)輸入框內(nèi)容的數(shù)字校驗(yàn)代碼實(shí)例
相關(guān)文章
jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局【推薦】
本文主要介紹了jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局的實(shí)例，代碼簡(jiǎn)單，容易修改。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧2017-02-02
這篇文章主要介紹了jQuery中過(guò)濾器的基本用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery過(guò)濾器針對(duì)table表格元素屬性進(jìn)行判斷與設(shè)置的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
有時(shí)候我們需要得到瀏覽器窗口內(nèi)容部分的高度，而不是整個(gè)窗口的高度。我試了下JQuery下的window對(duì)象，似乎讀的正是內(nèi)容部分，有點(diǎn)意外，不過(guò)恰好滿足了我們的要求2012-02-02
jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文2018-01-01
我們?cè)谇岸碎_發(fā)，經(jīng)常要用到彈出層的效果，以前很早前就想將這個(gè)功能整理成一個(gè)公共的接口來(lái)實(shí)現(xiàn)了；自寫的第一個(gè)jQuery插件，這里分享給大家，有需要的小伙伴參考下。2015-04-04
這篇文章主要介紹了jquery模擬alert的彈窗插件的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
最近寫了兩個(gè)管理后臺(tái)的前端頁(yè)面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁(yè)是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07
本文帶你了解了一遍 jQuery 3 將會(huì)帶來(lái)的一些重大變化?；蛟S你已經(jīng)注意到了，這個(gè)版本是可能對(duì)你現(xiàn)有的項(xiàng)目產(chǎn)生太大的影響，因?yàn)闆](méi)有引入太多許多重大更改。2016-06-06