layui表單驗證

1.layui表單驗證

　　低版本的layui的表單驗證有一些bug，比如，想實現非必填的郵箱校驗，直接使用lay-verify="email"就會有問題。此時的效果是格式校驗正確，但是不填的時候會報錯。

　　此時有這么幾個解決方法：

　　1.1 升級插件

　　在高版本的layui中這個問題是解決了的。附上部分源碼

this.config = {
                verify: {
                    required: [/[\S]+/, "必填項不能為空"],
                    phone: [/(^$)|^1\d{10}$/, "請輸入正確的手機號"],
                    email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "郵箱格式不正確"],
                    url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "鏈接格式不正確"],
                    number: [/(^$)|^\d+$/,'只能填寫數字'],
                    date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正確"],
                    identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "請輸入正確的身份證號"]
                }
}

　　此時加上了(^$)|，所以為空的時候也是校驗通過的了。

　　1.2 改插件源碼

　　道理同上，需要改的是form.js和layui.all.js。

　　1.3 自定義校驗

　　原理還是和上邊一樣的。關鍵代碼：

form.verify({
      yearLength: function(value){
          if(value.length !== 4){
                  return '輸入年份格式錯誤';
                }
          }
          ,numberQq: function(value){
              if(!/(^$)|^\d+$/.test(value)){
                    return 'QQ號碼格式錯誤';
                  }
          }
          ,emaliReg: function(value){
              if(!/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)){
                    return '郵箱格式錯誤';
                  }
          }
      });

2.一些知識點回顧

　　2.1 元素選擇器循環

　　元素選擇器選中的元素是個數組，有長度屬性，但是不是嚴格意義的數組，所以不能使用數組的forEach。它有自己的循環，叫each，且兩個參數第一個是index,第二個是e，與普通js數組的forEach參數順序相反。

　　2.2 $(window).height() 和 $(document).height()

　　前者是可見區域的高度，后者是文檔高度。這個知識點很基礎也很實用。

　　2.3 jquery選擇器parent和parents

　　前者選取的是上一級，而后者顧名思義可以選擇到全部上級，因而可以結合其他選擇器選擇特定父元素，如$($('.del_con')[0]).parents('.connecter')