使用layui怎么實現表單標簽校驗

這期內容當中小編將會給大家帶來有關使用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是什么

layui是一款采用自身模塊規范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發，能夠作為PC網頁端后臺系統與前臺界面的速成開發方案。

上述就是小編為大家分享的使用layui怎么實現表單標簽校驗了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。