Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例

2019-11-20 11:00:38

字體：大中小

供稿：網(wǎng)友

要實(shí)現(xiàn)的功能：在做添加學(xué)生信息的時(shí)候，利用easyui的驗(yàn)證功能判斷學(xué)號(hào)是否重復(fù)和學(xué)號(hào)只能為數(shù)字

最終效果如下圖：

但在做這個(gè)的過(guò)程中，遇到了一系列的問(wèn)題：

擴(kuò)展validatebox的驗(yàn)證方法，最開(kāi)始的驗(yàn)證代碼如下：

//學(xué)號(hào)格式只能為數(shù)字  ****//這里沒(méi)有問(wèn)題****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，再獲取出來(lái)后解析成數(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)橛衅渌恍﹩?wèn)題，也遇到了一些問(wèn)題：

表單開(kāi)始是這樣寫(xiě)的，validType屬性寫(xiě)在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è)問(wèn)題就是：這樣寫(xiě)Firebug會(huì)報(bào)錯(cuò)，因?yàn)?snumbers需要用引號(hào)引起來(lái)，但是直接加引號(hào)會(huì)出錯(cuò)，這里相當(dāng)于是三重引號(hào)，網(wǎng)上查了很多資料，有的用轉(zhuǎn)義，都行不通，我猜想這里是easyui解析的問(wèn)題，除非更改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>

然后新的問(wèn)題又出現(xiàn)了，如何把學(xué)號(hào)格式驗(yàn)證加進(jìn)去？

我是這樣寫(xiě)的，不成功，感覺(jué)還是三重引號(hào)的問(wèn)題，F(xiàn)irebug報(bào)錯(cuò)，各種方法都試了，無(wú)效：

<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ì)有同樣的問(wèn)題，在這里我肯定是easyui解析的問(wèn)題了，也就不糾結(jié)了。

這里遇到兩個(gè)問(wèn)題，一個(gè)是怎么將ajax返回來(lái)的數(shù)據(jù)放進(jìn)validType屬性中，就是不用另一個(gè)textarea來(lái)存數(shù)據(jù)，未解決......求指導(dǎo)

第二個(gè)是動(dòng)態(tài)設(shè)置easyui控件無(wú)效的問(wèn)題，簡(jiǎn)單說(shuō)下，代碼如下：

<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控件后，沒(méi)有效果，后來(lái)百度了下，動(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è)元素要像下面這樣寫(xiě)：

//設(shè)置easyui控件$("#addSnumber").attr("class", "easyui-textbox");//設(shè)置驗(yàn)證屬性$("#addSnumber").attr("validType","snumber['#snumber']");//解析指定元素，找它的父元素$.parser.parse($("#addSnumber").parent());

回到之前的問(wèn)題，驗(yàn)證學(xué)號(hào)不能重復(fù)和學(xué)號(hào)格式。

最后網(wǎng)上查閱了各種資料，發(fā)現(xiàn)我的思路不行，因?yàn)槲沂窍葘⑺袑W(xué)號(hào)加載到客戶端再驗(yàn)證，但這樣有一個(gè)問(wèn)題，如果多個(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ù)，加載過(guò)來(lái)后判斷輸入的值        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ù)'},

這樣寫(xiě)的好處是：可以實(shí)時(shí)加載數(shù)據(jù)來(lái)判斷，在提交表單時(shí)也會(huì)再加載數(shù)據(jù)來(lái)判斷一次，而且不需要傳入?yún)?shù)，就不會(huì)再有三重引號(hào)的問(wèn)題了；但有一個(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è)問(wèn)題，表單代碼如下：

<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)證都可以了?。。?br />總結(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ù)，加載過(guò)來(lái)后判斷輸入的值        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>

最終效果如下圖：