layui表單元素如何校驗

小編給大家分享一下layui表單元素如何校驗，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

思路：

我們只需要在表單元素上添加lay-verify即可完成對表單元素的校驗。

layui提供了以下值：

required（必填項）
phone（手機號）
email（郵箱）
url（網址）
number（數字）
date（日期）
identity（身份證）
自定義值

同時支持多條規則的驗證，格式：lay-verify=“驗證A|驗證B”
如：lay-verify=“required|phone|number”

另外，除了我們內置的校驗規則，你還可以給他設定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法對pass進行一個校驗規則的定義

示例：

<div class="layui-form-item">
        <label for="" class="layui-form-label">請輸入郵件</label>
        <div class="layui-input-block">
            <input type="text" placeholder="請輸入郵件" lay-verify="email" class="layui-input">
        </div>
    </div>

填入非法郵件時，點擊提交會有笑臉圖標提示，挺棒的！

自定義校驗：

form.verify({
  username: function(value, item){ //value：表單的值、item：表單的DOM對象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用戶名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用戶名首尾不能出現下劃線\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用戶名不能全為數字';
    }
  }
  
  //我們既支持上述函數式的方式，也支持下述數組的形式
  //數組的兩個值分別代表：[正則匹配、匹配不符時的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密碼必須6到12位，且不能出現空格'
  ] 
});

當你自定義了類似上面的驗證規則后，你只需要把key賦值給輸入框的 lay-verify 屬性即可：

<input type="text" lay-verify="username" placeholder="請輸入用戶名">
<input type="password" lay-verify="pass" placeholder="請輸入密碼">

以上是“layui表單元素如何校驗”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！