碼上快樂

相關內容    簡體    繁體

jquery easy ui 驗證框架

本文轉載自   查看原文   2017-03-22 14:42   1685    js
引入參考最下面API

missingMessage：未填寫時顯示的信息
validType：驗證類型見下示例
invalidMessage：無效的數據類型時顯示的信息
required="true" 必填項
class="easyui-validatebox" 文本驗證
class="easyui-numberbox" 數字驗證
html 
   
   
   
           
    
    
    
    
            
  1.  郵箱驗證：<input type="text" validtype="email" required="true" missingMessage="不能為空" invalidMessage="郵箱格式不正確" /><br />
    2. 
    
    
    
            
  2.  網址驗證：<input type="text" validtype="url" invalidMessage="url格式不正確[http://www.example.com]" /><br />
    3. 
    
    
    
            
  3.  長度驗證：<input type="text" validtype="length[8,20]" invalidMessage="有效長度8-20" /><br />
    4. 
    
    
    
            
  4.  手機驗證：<input type="text" validtype="mobile" /><br />
    5. 
    
    
    
            
  5.  郵編驗證：<input type="text" validtype="zipcode" /><br />
    6. 
    
    
    
            
  6.  賬號驗證：<input type="text" validtype="account[8,20]" /><br />
    7. 
    
    
    
            
  7.  漢子驗證：<input type="text" validtype="CHS" /><br />
    8. 
    
    
    
            
  8.  遠程驗證：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用戶名已存在"/>
    9.
js 
   
   
   
           
    
    
    
    
            
  1. // easyui通用驗證規則
    2. 
    
    
    
            
  2.  $.extend($.fn.validatebox.defaults.rules, {
    3. 
    
    
    
            
  3.  date: {
    4. 
    
    
    
            
  4.  validator: function (value) {
    5. 
    
    
    
            
  5.  var reg = /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/;
    6. 
    
    
    
            
  6.  return reg.test(value);
    7. 
    
    
    
            
  7.  },
    8. 
    
    
    
            
  8.  message: '日期格式不正確 YYYY-MM-DD'
    9. 
    
    
    
            
  9.  },
    10. 
    
    
    
            
  10.  integer: {
    11. 
    
    
    
            
  11.  validator: function (value) {
    12. 
    
    
    
            
  12.  var reg = /^[\-\+]?\d+$/;
    13. 
    
    
    
            
  13.  return reg.test(value);
    14. 
    
    
    
            
  14.  },
    15. 
    
    
    
            
  15.  message: '無效的整數'
    16. 
    
    
    
            
  16.  },
    17. 
    
    
    
            
  17.  number: {
    18. 
    
    
    
            
  18.  validator: function (value) {
    19. 
    
    
    
            
  19.  var reg = /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/;
    20. 
    
    
    
            
  20.  return reg.test(value);
    21. 
    
    
    
            
  21.  },
    22. 
    
    
    
            
  22.  message: '無效的數值'
    23. 
    
    
    
            
  23.  },
    24. 
    
    
    
            
  24.  mobile: {
    25. 
    
    
    
            
  25.  validator: function (value) {
    26. 
    
    
    
            
  26.  alert(123)
    27. 
    
    
    
            
  27.  var reg = /^1[3|4|5|8|9]\d{9}$/;
    28. 
    
    
    
            
  28.  return reg.test(value);
    29. 
    
    
    
            
  29.  },
    30. 
    
    
    
            
  30.  message: '輸入手機號碼格式不准確.'
    31. 
    
    
    
            
  31.  }
    32. 
    
    
    
            
    33. 
    
    
    
            
  33.  })
    34. 
    
    
    
            

    35. 
   
   
   
           

   
   
   
           
    
    
    
    
            
  1. $.extend($.fn.validatebox.defaults.rules, {
    2. 
    
    
    
            
  2.  ajaxLookName: {//ajax驗證
    3. 
    
    
    
            
  3.  validator: function (value) {
    4. 
    
    
    
            
  4.  $.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:value},function(rec){
    5. 
    
    
    
            
  5.  if(rec.code == "0"){
    6. 
    
    
    
            
  6.  if(rec.data.result){
    7. 
    
    
    
            
  7.  $.fn.validatebox.defaults.rules.ajaxLookName.message='看房團名稱已被其它用戶定義過，請修改！';
    8. 
    
    
    
            
  8.  return false;
    9. 
    
    
    
            
  9.  }else{
    10. 
    
    
    
            
  10.  return true;
    11. 
    
    
    
            
  11.  }
    12. 
    
    
    
            
  12.  }else{
    13. 
    
    
    
            
  13.  alert(rec.desc);
    14. 
    
    
    
            
  14.  }
    15. 
    
    
    
            
  15.  },"json").error(function(){
    16. 
    
    
    
            
  16.  alert("請求失敗！");
    17. 
    
    
    
            
  17.  });
    18. 
    
    
    
            
  18.  },
    19. 
    
    
    
            
  19.  message: ''
    20. 
    
    
    
            
  20.  }
    21. 
    
    
    
            
  21. })
    22.

驗證 
   
   
   
           
    
    
    
    
            
  1. $($($addDiv).find("#addForm")).form('validate')//返回 true false
    2.

至於 要不要加  $('input[type=text]').validatebox( );   使所有驗證生效，api上說 設置了樣式可以不必加，但是實際中和bootstarp集成中不能調用，一調用就出現莫名其妙的錯誤

最后說一下  easyui、不支持組合校驗   渣渣  我也懶得自定義多種規則了  最多只能支持 一個必填 和 一個自定義驗證
以上是正常的使用

與bootstarp使用的時候又出現各種奇葩問題

1.easyui js 要引兩次
2.自定義的驗證規則要寫在第二次引easy ui 前面 否則不生效
3.自定義的ajax的規則不生效了,需要自己自定義 ， 采用隱藏框吧
4.$('input[type=text]').validatebox();   使所有驗證生效，api上說 設置了樣式可以不必加，但是實際中和bootstarp集成中不能調用，一調用就出現莫名其妙的錯誤

第二種bug 代碼 
   
   
   
           
    
    
    
    
            
  1. <link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/black/easyui.css" type="text/css"/>
    2. 
    
    
    
            
  2. <link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/icon.css" type="text/css"/>
    3. 
    
    
    
            
  3. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>
    4. 
    
    
    
            
  4. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
    5. 
    
    
    
            
  5. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/common_validation-zh_CN.js"></script>
    6. 
    
    
    
            
  6. <script>
    7. 
    
    
    
            
  7.  $.extend($.fn.validatebox.defaults.rules, {
    8. 
    
    
    
            
  8.  datecompare: {
    9. 
    
    
    
            
  9.  validator: function (value) {
    10. 
    
    
    
            
  10.  if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){
    11. 
    
    
    
            
  11.  return false;
    12. 
    
    
    
            
  12.  }
    13. 
    
    
    
            
  13.  return true;
    14. 
    
    
    
            
  14.  },
    15. 
    
    
    
            
  15.  message: '報名開始時間不能大於報名截止時間，請修改！'
    16. 
    
    
    
            
  16.  },
    17. 
    
    
    
            
  17.  lookhousedatecompare: {
    18. 
    
    
    
            
  18.  validator: function (value) {
    19. 
    
    
    
            
  19.  if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){
    20. 
    
    
    
            
  20.  return false;
    21. 
    
    
    
            
  21.  }
    22. 
    
    
    
            
  22.  return true;
    23. 
    
    
    
            
  23.  },
    24. 
    
    
    
            
  24.  message: '看房時間必須大於報名截止時間，請修改！'
    25. 
    
    
    
            
  25.  },
    26. 
    
    
    
            
  26.  numcompare: {
    27. 
    
    
    
            
  27.  validator: function (value) {
    28. 
    
    
    
            
  28.  if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){
    29. 
    
    
    
            
  29.  return false;
    30. 
    
    
    
            
  30.  }
    31. 
    
    
    
            
  31.  return true;
    32. 
    
    
    
            
  32.  },
    33. 
    
    
    
            
  33.  message: '成團最低人數必須不能大於成團最高人數，請修改！'
    34. 
    
    
    
            
  34.  }
    35. 
    
    
    
            
  35.  })
    36. 
    
    
    
            
    37. 
    
    
    
            
  37. </script>
    38. 
    
    
    
            
  38. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>
    39. 
    
    
    
            
    40.

如上圖   自定義驗證規則要引在第二次前面

第三種bug 代碼  

   
   
   
           
    
    
    
    
            
  1. $("#lookhousegroupName").on("blur",function(){
    2. 
    
    
    
            
  2.  if($("#lookhousegroupName").hasClass("validatebox-invalid")){
    3. 
    
    
    
            
  3.  return;
    4. 
    
    
    
            
  4.  }
    5. 
    
    
    
            
  5.  $.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:($(this).val())},function(rec){
    6. 
    
    
    
            
  6.  if(rec.code == "0"){
    7. 
    
    
    
            
  7.  if(rec.data.result){
    8. 
    
    
    
            
  8.  $("#lookhousegroupNameajax").val("0");
    9. 
    
    
    
            
  9.  return false;
    10. 
    
    
    
            
  10.  }else{
    11. 
    
    
    
            
  11.  $("#lookhousegroupNameajax").val("1");
    12. 
    
    
    
            
  12.  }
    13. 
    
    
    
            
  13.  }else{
    14. 
    
    
    
            
  14.  alert(rec.desc);
    15. 
    
    
    
            
  15.  }
    16. 
    
    
    
            
  16.  },"json").error(function(){
    17. 
    
    
    
            
  17.  alert("請求失敗！");
    18. 
    
    
    
            
  18.  });
    19. 
    
    
    
            
    20. 
    
    
    
            
  20.  })
    21.

如上  $ ( "#lookhousegroupName" ). hasClass ( "validatebox-invalid" ) 加上這句 ， 是要等元素驗證通過后 再調用ajax,防止不必要的多余驗證



最后貼上  api

通過 $.fn.validatebox.defaults 重寫默認的 defaults。

驗證框（validatebox）是為了驗證表單輸入字段而設計的。如果用戶輸入無效的值，它將改變背景顏色，顯示警告圖標和提示消息。驗證框（validatebox）可與表單（form）插件集成，防止提交無效的字段。

依賴

  • tooltip

用法

從標記創建驗證框（validatebox）。

   
   
   
           
    
    
    
    
            
  1. <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">
    2.

使用 javascript 創建驗證框（validatebox）。

   
   
   
           
    
    
    
    
            
  1. <input id="vv">
    2. 
   
   
   
           
   
   
   
           
    
    
    
    
            
  1. $('#vv').validatebox({
    2. 
    
    
    
            
  2.  required: true,
    3. 
    
    
    
            
  3.  validType: 'email'
    4. 
    
    
    
            
  4. });
    5.

檢查密碼和重新輸入密碼是相同的。

   
   
   
           
    
    
    
    
            
  1. // extend the 'equals' rule
    2. 
    
    
    
            
  2. $.extend($.fn.validatebox.defaults.rules, {
    3. 
    
    
    
            
  3.  equals: {
    4. 
    
    
    
            
  4.  validator: function(value,param){
    5. 
    
    
    
            
  5.  return value == $(param[0]).val();
    6. 
    
    
    
            
  6.  },
    7. 
    
    
    
            
  7.  message: 'Field do not match.'
    8. 
    
    
    
            
  8.  }
    9. 
    
    
    
            
  9. });
    10. 
   
   
   
           
   
   
   
           
    
    
    
    
            
  1. <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
    2. 
    
    
    
            
  2. <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    3. 
    
    
    
            
  3.  required="required" validType="equals['#pwd']">
    4.

驗證規則

驗證規則是通過使用 required 和 validType 屬性來定義的，這里是已經實施的規則：

  • email：匹配 email 正則表達式規則。
  • url：匹配 URL 正則表達式規則。
  • length[0,100]：允許從 x 到 y 個字符。
  • remote['http://.../action.do','paramName']：發送 ajax 請求來驗證值，成功時返回 'true' 。

要自定義驗證規則，重寫 $.fn.validatebox.defaults.rules，來定義一個驗證函數和無效的信息。例如，定義一個 minLength 驗證類型：

   
   
   
           
    
    
    
    
            
  1. $.extend($.fn.validatebox.defaults.rules, {
    2. 
    
    
    
            
  2.  minLength: {
    3. 
    
    
    
            
  3.  validator: function(value, param){
    4. 
    
    
    
            
  4.  return value.length >= param[0];
    5. 
    
    
    
            
  5.  },
    6. 
    
    
    
            
  6.  message: 'Please enter at least {0} characters.'
    7. 
    
    
    
            
  7.  }
    8. 
    
    
    
            
  8. });
    9.

現在您可以使用這個 minLength 驗證類型來定義一個至少輸入5個字符的輸入框：

   
   
   
           
    
    
    
    
            
  1. <input class="easyui-validatebox" data-options="validType:'minLength[5]'">
    2.

屬性

名稱 類型 描述 默認值
required boolean 定義是否字段應被輸入。 false
validType string,array 定義字段的驗證類型，比如 email、url，等等。可能的值：
1、驗證類型字符串，應用單個驗證規則。
2、驗證類型數組，應用多個驗證規則。單個字段上的多個驗證規則自版本 1.3.2 起可用。

代碼實例：
        
        
        
                
    
         
         
         
                 
  1. <input class="easyui-validatebox" data-options="required:true,validType:'url'">
    2. 
         
         
         
                 
  2. <input class="easyui-validatebox" data-options="
    3. 
         
         
         
                 
  3.  required:true,
    4. 
         
         
         
                 
  4.  validType:['email','length[0,20]']
    5. 
         
         
         
                 
  5. ">
    6.
null
delay number 延遲驗證最后的輸入值。該屬性自版本 1.3.2 起可用。 200
missingMessage string 當文本框為空時出現的提示文本。 該字段是必需的。
invalidMessage string 當文本框的內容無效時出現的提示文本。 null
tipPosition string 定義當文本框的內容無效時提示消息的位置。可能的值：'left'、'right'。該屬性自版本 1.3.2 起可用。 right
deltaX number 在 X 方向的提示偏移。該屬性自版本 1.3.3 起可用。 0
novalidate boolean 當設置為 true 時，則禁用驗證。該屬性自版本 1.3.4 起可用。 false

方法

名稱 參數 描述
destroy none 移除並銷毀該組件。
validate none 進行驗證以判定文本框的內容是否有效。
isValid none 調用 validate 方法並且返回驗證結果，true 或者 false。
enableValidation none 啟用驗證。該方法自版本 1.3.4 起可用。
disableValidation none 禁用驗證。該方法自版本 1.3.4 起可用。













免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 easy ui 驗證框的使用 Jquery UI 和Easy UI常用插件 Jquery Easy-UI 樹形菜單的運用 JQuery Easy Ui （Tree樹）詳解（轉） 前端基於jquery的UI框架 jquery easy ui 1.3.4 數據表格(DataGrid)（8） 18款 jQuery UI框架 jQuery Validate驗證框架詳解 jQuery Validate驗證框架詳解 jQuery Validate驗證框架詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM