Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
要實(shí)現(xiàn)的功能：在做添加學(xué)生信息的時(shí)候，利用easyui的驗(yàn)證功能判斷 學(xué)號(hào)是否重復(fù)和學(xué)號(hào)只能為數(shù)字
最終效果如下圖：
但在做這個(gè)的過程中，遇到了一系列的問題：
擴(kuò)展validatebox的驗(yàn)證方法，最開始的驗(yàn)證代碼如下：
//學(xué)號(hào)格式只能為數(shù)字 ****//這里沒有問題****
number: {//value值為文本框中的值
validator: function (value) {
var reg = /^[0-9]*$/;
return reg.test(value);
},
message: '學(xué)號(hào)格式不正確.'
},
//驗(yàn)證學(xué)號(hào)不能重復(fù)
snumber: {
//param參數(shù)為textarea的id值
validator: function (value, param) {
//將從后臺(tái)獲取的json數(shù)據(jù)先放入textarea，再獲取出來后解析成數(shù)組
var snumbers = $.parseJSON($(param)[0].val());
for(var i=0;i < snumbers.length;i++){
if(value == snumbers[i]){ //如果學(xué)號(hào)有重復(fù)返回false
return false;
}
}
return true;
}
在這里先只做學(xué)號(hào)重復(fù)驗(yàn)證，因?yàn)橛衅渌恍﹩栴}，也遇到了一些問題：
表單開始是這樣寫的，validType屬性寫在data-options屬性里：
<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,validType:'snumber[#snumbers]', missingMessage:'請(qǐng)輸入學(xué)號(hào)'" /> <textarea id="snumbers" style="display: none"></textarea>
這里就有一個(gè)問題就是：這樣寫Firebug會(huì)報(bào)錯(cuò)，因?yàn)?snumbers需要用引號(hào)引起來，但是直接加引號(hào)會(huì)出錯(cuò)，這里相當(dāng)于是三重引號(hào)，網(wǎng)上查了很多資料，有的用轉(zhuǎn)義，都行不通，我猜想這里是easyui解析的問題，除非更改easyui的源碼。有大神知道的還請(qǐng)不吝賜教。
然后將validType屬性放在外面，驗(yàn)證成功，如下：
<input id="addSnumber" validType="snumber['#snumbers']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請(qǐng)輸入學(xué)號(hào)'" /> <textarea id="snumbers" style="display: none"></textarea>
然后新的問題又出現(xiàn)了，如何把學(xué)號(hào)格式驗(yàn)證加進(jìn)去？
我是這樣寫的，不成功，感覺還是三重引號(hào)的問題，F(xiàn)irebug報(bào)錯(cuò)，各種方法都試了，無效：
<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請(qǐng)輸入學(xué)號(hào)'" /> <textarea id="snumbers" style="display: none"></textarea>
然后我試了另一種方式，動(dòng)態(tài)加載easyui控件，但是兩個(gè)驗(yàn)證放在一起還是會(huì)有同樣的問題，在這里我肯定是easyui解析的問題了，也就不糾結(jié)了。
這里遇到兩個(gè)問題，一個(gè)是怎么將ajax返回來的數(shù)據(jù)放進(jìn)validType屬性中，就是不用另一個(gè)textarea來存數(shù)據(jù)，未解決......求指導(dǎo)
第二個(gè)是動(dòng)態(tài)設(shè)置easyui控件無效的問題，簡(jiǎn)單說下，代碼如下：
<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗(yàn)證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面這樣在jQuery里設(shè)置easyui控件后，沒有效果，后來百度了下，動(dòng)態(tài)添加easy控件后需要重新渲染下，如下：
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗(yàn)證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有頁(yè)面
$.parser.parse();
這樣就可以了；但是查看easyui的api后發(fā)現(xiàn)可以只解析某個(gè)dom元素。
下面這段代碼達(dá)不到效果：
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗(yàn)證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素
$.parser.parse($("#addSnumber"));
后經(jīng)百度后得知：
parser只渲染$("#addSnumber")的子孫元素，并不包括$("#addSnumber")自身，而它的子孫元素并不包含任何Easyui支持的控件class，所以這個(gè)地方就得不到想要的效果了。
所以想要渲染單個(gè)元素要像下面這樣寫：
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗(yàn)證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素，找它的父元素
$.parser.parse($("#addSnumber").parent());
回到之前的問題，驗(yàn)證學(xué)號(hào)不能重復(fù)和學(xué)號(hào)格式。
最后網(wǎng)上查閱了各種資料，發(fā)現(xiàn)我的思路不行，因?yàn)槲沂窍葘⑺袑W(xué)號(hào)加載到客戶端再驗(yàn)證，但這樣有一個(gè)問題，如果多個(gè)用戶在這期間添加了學(xué)號(hào)就有可能導(dǎo)致重復(fù)。
所以最后將獲取所有學(xué)號(hào)的操作放到驗(yàn)證函數(shù)里，如下：
//驗(yàn)證學(xué)號(hào)不能重復(fù)
snumber: {
validator: function (value) {
var flag = true;
$.ajax({
type: "post",
async: false,
url: "/sims/StudentServlet?method=AllSNumber",
success: function(data){//在驗(yàn)證函數(shù)里加載數(shù)據(jù)，加載過來后判斷輸入的值
var snumbers = $.parseJSON(data);
for(var i=0;i < snumbers.length;i++){
if(value == snumbers[i]){
flag = false;
break;
}
}
}
});
return flag;
},
message: '學(xué)號(hào)重復(fù)'
},
這樣寫的好處是：可以實(shí)時(shí)加載數(shù)據(jù)來判斷，在提交表單時(shí)也會(huì)再加載數(shù)據(jù)來判斷一次，而且不需要傳入?yún)?shù)，就不會(huì)再有三重引號(hào)的問題了；但有一個(gè)缺點(diǎn)就是會(huì)很多次請(qǐng)求數(shù)據(jù)庫(kù)，服務(wù)器資源消耗大。
提交表單時(shí)加入下面這句，驗(yàn)證表單：
//驗(yàn)證表單
var validate = $("#editStuForm").form("validate");
if(!validate){
$.messager.alert("消息提醒","請(qǐng)檢查你輸入的數(shù)據(jù)!","warning");
return;
} else{
//提交
}
這里有另一個(gè)問題，表單代碼如下：
<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請(qǐng)輸入學(xué)號(hào)'" />
這里將validType屬性放在data-options外面后，不能驗(yàn)證，F(xiàn)irebug會(huì)報(bào)錯(cuò)?。?！
最后將其放到data-options里面：
<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'請(qǐng)輸入學(xué)號(hào)'" />
OK，都行了，兩個(gè)驗(yàn)證都可以了?。?！
總結(jié)：easyui驗(yàn)證重復(fù)和格式，多重驗(yàn)證
//學(xué)號(hào)格式只能為數(shù)字
number: {//value值為文本框中的值
validator: function (value) {
var reg = /^[0-9]*$/;
return reg.test(value);
},
message: '學(xué)號(hào)格式不正確.'
},
//驗(yàn)證學(xué)號(hào)不能重復(fù)
snumber: {
validator: function (value) {
var flag = true;
$.ajax({
type: "post",
async: false,
url: "/sims/StudentServlet?method=AllSNumber",
success: function(data){//在驗(yàn)證函數(shù)里加載數(shù)據(jù)，加載過來后判斷輸入的值
var snumbers = $.parseJSON(data);
for(var i=0;i < snumbers.length;i++){
if(value == snumbers[i]){
flag = false;
break;
}
}
}
});
return flag;
},
message: '學(xué)號(hào)重復(fù)'
},
<tr>
<td>學(xué)號(hào):</td>
<td>
<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'請(qǐng)輸入學(xué)號(hào)'" />
</td>
</tr>
最終效果如下圖：
OK?。?！
大多都是自己多次嘗試總結(jié)的，很多東西還不明白其中的原理，我想應(yīng)該是easyui.min.js的問題，還需要繼續(xù)學(xué)習(xí)，希望這篇文章可以幫到大家。
相關(guān)文章
jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例
原生方法明顯要比jQuery方法快，因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情，如果你針對(duì)的是現(xiàn)代瀏覽器，那么使用原生方法會(huì)使性能有很大的提升2013-05-05
JQuery1.6 使用方法三，想要學(xué)習(xí)jquery的朋友可以參考下。2011-11-11
使用Jquery獲取帶特殊符號(hào)的ID 標(biāo)簽的方法
這篇文章主要介紹了使用Jquery如何獲取帶特殊符號(hào)的ID 標(biāo)簽，該怎么寫,需要的朋友可以參考下2014-04-04
Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
表頭是浮動(dòng)的，因?yàn)閮?nèi)容在同一頁(yè)面展示，當(dāng)滾動(dòng)時(shí)，看不到列頭，為了改動(dòng)少只能使用jquery原生態(tài)實(shí)現(xiàn)滾動(dòng)2014-03-03
在第一次頁(yè)面加載時(shí)，元素A的X效果正常，點(diǎn)擊B之后，頁(yè)面局部刷新，此時(shí)，回到A，元素A失去X效果.后來了解了下頁(yè)面應(yīng)用了ASP.NET AJAX局部刷新，這就明朗了，估計(jì)是和JQUERY沖突了2013-04-04
這篇文章主要介紹了jquery如何自定義表格樣式，分別實(shí)現(xiàn)三種樣式：默認(rèn)狀態(tài)（灰白相間），鼠標(biāo)懸浮狀態(tài)（綠色），鼠標(biāo)點(diǎn)擊狀態(tài)（黃色），感興趣的小伙伴們可以參考一下2015-11-11
剛看到個(gè)問題，如何得知同時(shí)按下了哪幾個(gè)鍵以及按鍵順序（難道是格斗游戲的組合鍵？），其實(shí)jQuery實(shí)現(xiàn)起來是很簡(jiǎn)單的。2010-03-03
jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-09-09
jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
驗(yàn)證碼倒計(jì)時(shí)功能，在前端開發(fā)中經(jīng)常會(huì)遇到，下面小編給大家?guī)砹薺Query 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能，感興趣的朋友跟隨小編一起看看吧2018-09-09