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

更新時間：2015年12月15日 16:26:12 作者：Chiangchou

這篇文章主要介紹了Jquery插件easyUi實現(xiàn)表單驗證示例，需要的朋友可以參考下

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

最終效果如下圖：

但在做這個的過程中，遇到了一系列的問題：

擴(kuò)展validatebox的驗證方法，最開始的驗證代碼如下：

//學(xué)號格式只能為數(shù)字  ****//這里沒有問題****
number: {//value值為文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '學(xué)號格式不正確.'
},
//驗證學(xué)號不能重復(fù)
snumber: {
   //param參數(shù)為textarea的id值
   validator: function (value, param) {
     //將從后臺獲取的json數(shù)據(jù)先放入textarea，再獲取出來后解析成數(shù)組
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果學(xué)號有重復(fù)返回false
         return false;
       }
     }
     return true;
 }

在這里先只做學(xué)號重復(fù)驗證，因為有其它一些問題，也遇到了一些問題：

表單開始是這樣寫的，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:'請輸入學(xué)號'" />
<textarea id="snumbers" style="display: none"></textarea>

這里就有一個問題就是：這樣寫Firebug會報錯，因為#snumbers需要用引號引起來，但是直接加引號會出錯，這里相當(dāng)于是三重引號，網(wǎng)上查了很多資料，有的用轉(zhuǎn)義，都行不通，我猜想這里是easyui解析的問題，除非更改easyui的源碼。有大神知道的還請不吝賜教。
然后將validType屬性放在外面，驗證成功，如下：

<input id="addSnumber" validType="snumber['#snumbers']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請輸入學(xué)號'" />
<textarea id="snumbers" style="display: none"></textarea>

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

我是這樣寫的，不成功，感覺還是三重引號的問題，F(xiàn)irebug報錯，各種方法都試了，無效：

<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請輸入學(xué)號'" />
<textarea id="snumbers" style="display: none"></textarea>

然后我試了另一種方式，動態(tài)加載easyui控件，但是兩個驗證放在一起還是會有同樣的問題，在這里我肯定是easyui解析的問題了，也就不糾結(jié)了。

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

第二個是動態(tài)設(shè)置easyui控件無效的問題，簡單說下，代碼如下：

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面這樣在jQuery里設(shè)置easyui控件后，沒有效果，后來百度了下，動態(tài)添加easy控件后需要重新渲染下，如下：
//設(shè)置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//設(shè)置驗證屬性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有頁面
$.parser.parse();

這樣就可以了；但是查看easyui的api后發(fā)現(xiàn)可以只解析某個dom元素。

下面這段代碼達(dá)不到效果：

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

后經(jīng)百度后得知：

parser只渲染$("#addSnumber")的子孫元素，并不包括$("#addSnumber")自身，而它的子孫元素并不包含任何Easyui支持的控件class，所以這個地方就得不到想要的效果了。

所以想要渲染單個元素要像下面這樣寫：

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

回到之前的問題，驗證學(xué)號不能重復(fù)和學(xué)號格式。

最后網(wǎng)上查閱了各種資料，發(fā)現(xiàn)我的思路不行，因為我是先將所有學(xué)號加載到客戶端再驗證，但這樣有一個問題，如果多個用戶在這期間添加了學(xué)號就有可能導(dǎo)致重復(fù)。

所以最后將獲取所有學(xué)號的操作放到驗證函數(shù)里，如下：

//驗證學(xué)號不能重復(fù)
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在驗證函數(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é)號重復(fù)'
},

這樣寫的好處是：可以實時加載數(shù)據(jù)來判斷，在提交表單時也會再加載數(shù)據(jù)來判斷一次，而且不需要傳入?yún)?shù)，就不會再有三重引號的問題了；但有一個缺點就是會很多次請求數(shù)據(jù)庫，服務(wù)器資源消耗大。

提交表單時加入下面這句，驗證表單：

//驗證表單
var validate = $("#editStuForm").form("validate");
if(!validate){
　　$.messager.alert("消息提醒","請檢查你輸入的數(shù)據(jù)!","warning");
　　return;
} else{
　　//提交
}

這里有另一個問題，表單代碼如下：

<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'請輸入學(xué)號'" />

這里將validType屬性放在data-options外面后，不能驗證，F(xiàn)irebug會報錯?。?！

最后將其放到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:'請輸入學(xué)號'" />

OK，都行了，兩個驗證都可以了?。?！
總結(jié)：easyui驗證重復(fù)和格式，多重驗證

//學(xué)號格式只能為數(shù)字
number: {//value值為文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '學(xué)號格式不正確.'
},
//驗證學(xué)號不能重復(fù)
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在驗證函數(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é)號重復(fù)'
},

<tr>
  <td>學(xué)號:</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:'請輸入學(xué)號'" />
  </td>
</tr>

最終效果如下圖：