Jquery外掛程式easyUi實作表單驗證範例_jquery

要實現的功能：在做加入學生資訊的時候，利用easyui的驗證功能判斷 學號是否重複和學號只能為數字

最終效果如下圖：

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

擴充validatebox的驗證方法，最開始的驗證程式碼如下：

//学号格式只能为数字  ****//这里没有问题****
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
   //param参数为textarea的id值
   validator: function (value, param) {
     //将从后台获取的json数据先放入textarea，再获取出来后解析成数组
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果学号有重复返回false
         return false;
       }
     }
     return true;
 }

在這裡先只做學號重複驗證，因為有其它一些問題，也遇到了一些問題：

表單開始是這樣寫的，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:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

這裡就有一個問題就是：這樣寫Firebug會報錯，因為#snumbers需要用引號引起來，但是直接加引號會出錯，這裡相當於是三重引號，網上查了很多資料，有的用轉義，都行不通，我猜想這裡是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:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

然後新的問題又出現了，如何把學號格式驗證加進去？

我是這樣寫的，不成功，感覺還是三重引號的問題，Firebug報錯，各種方法都試了，無效：

<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

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

這裡遇到兩個問題，一個是怎麼將ajax回傳的資料放進validType屬性中，就是不用另一個textarea來存數據，未解決......求指導

第二個是動態設定easyui控制項無效的問題，簡單說下，程式碼如下：

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面这样在jQuery里设置easyui控件后，没有效果，后来百度了下，动态添加easy控件后需要重新渲染下，如下：
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有页面
$.parser.parse();

這樣就可以了；但是查看easyui的api後發現可以只解析某個dom元素。

下面這段程式碼達不到效果：

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素
$.parser.parse($("#addSnumber"));

後經百度後得知：

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

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

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素，找它的父元素
$.parser.parse($("#addSnumber").parent());

回到之前的問題，驗證學號不能重複和學號格式。

最後在網上查閱了各種資料，發現我的思路不行，因為我是先將所有學號加載到客戶端再驗證，但這樣有一個問題，如果多個用戶在這期間添加了學號就有可能導致重複。

所以最後將取得所有學號的運算放到驗證函數裡，如下：

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

這樣寫的好處是：可以即時載入資料來判斷，在提交表單時也會再載入資料來判斷一次，而且不需要傳入參數，就不會再有三重引號的問題了；但有一個缺點就是會很多次請求資料庫，伺服器資源消耗大。

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

//验证表单
var validate = $("#editStuForm").form("validate");
if(!validate){
　　$.messager.alert("消息提醒","请检查你输入的数据!","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:'请输入学号'" />

這裡將validType屬性放在data-options外面後，不能驗證，Firebug會報錯！ ！ ！

最後放到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:'请输入学号'" />

OK，都行了，兩個驗證都可以了！ ！ ！
總結：easyui驗證重複和格式，多重驗證

//学号格式只能为数字
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

<tr>
  <td>学号:</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:'请输入学号'" />
  </td>
</tr>

最終效果如下圖：

OK！ ！ ！
大多都是自己多次嘗試總結的，很多東西還不明白其中的原理，我想應該是easyui.min.js的問題，還需要繼續學習，希望這篇文章可以幫到大家。