成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? Jquery插件easyUi實現表單驗證示例
全站頭部文字 我要出現在這里
Jquery插件easyUi實現表單驗證示例 605 2024-03-16   

要實現的功能:在做添加學生信息的時候,利用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的問題,還需要繼續學習,希望這篇文章可以幫到大家。



主站蜘蛛池模板: 98372电影| 保镖1983| 明天属于我们第一季法剧完整版| 好好说话电视剧免费观看完整版40集 | 《僵尸道长》林正英| 凤凰资讯台| 《电业安全工作规程》电力线路 | 基础设施建设产业市场| 艺术影院| 一路狂奔| 山本裕典| 孤战迷城电视剧剧情介绍| 西海情歌原歌词全文| 房事性生活| 春节到,人欢笑,贴窗花,放鞭炮| 午夜高清影院| 妈妈的花样年华演员表全部| 历代高僧大德开悟诗100首| 视频www| 希崎| 追捕演员表| 青春没有遗憾才完美辩论资料| 情侣不雅| 张柏芝演的电视剧| 北京卫视今天全部节目表| 大学英语精读3第三版全书答案| 情哥哥| 搜狐网站官网| 东方卫视在线观看| 爱情三选一| 放下一个人最狠的网名| 1988田螺姑娘| 五年级上册口算| 布布一二情侣头像| 星星的你| 红日歌词完整版| 弯刀| 八月照相馆| you are my sunshine简谱| 兰陵王电影| 情事:秘密情事|

!!!站長長期在線接!!!

網站、小程序:定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103