layui如何實現(xiàn)表單驗證

這篇文章主要介紹layui如何實現(xiàn)表單驗證，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在網上看到很多validform和layer配合的驗證方式，但是覺得寫的不好，不清不楚的，于是研究了一下layui原生的驗證

1. 在需要驗證的item上加 lay-verify=“value” ，在提交按鈕上加 lay-submit lay-filter=“go” 兩個屬性

value：

required（必填項）
phone（手機號）
email（郵箱）
url（網址）
number（數(shù)字）
date（日期）
identity（身份證）
自定義值（就是自定義驗證規(guī)則）

PS ：layui要使用form 得用use...這樣的東西，我就不做說明了

layui.use('form', function(){
  var form = layui.form(); //只有執(zhí)行了這一步，部分表單元素才會修飾成功

2. 說一下自定義驗證

在這里寫自定義的驗證規(guī)則，“username”和“pass”是自定義驗證規(guī)則的名字，就跟前邊的"required","phone"...一樣，在這里定義好驗證的名字和驗證規(guī)則，

使用的方法就跟"required","phone"...一樣一樣的

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 '用戶名首尾不能出現(xiàn)下劃線\'_\'';
      }
      if(/^\d+\d+\d$/.test(value)){
        return '用戶名不能全為數(shù)字';
      }
    }

    //我們既支持上述函數(shù)式的方式，也支持下述數(shù)組的形式
    //數(shù)組的兩個值分別代表：[正則匹配、匹配不符時的提示文字]
    ,pass: [
      /^[\S]{6,12}$/,'密碼必須6到12位，且不能出現(xiàn)空格'
    ]
  });

3. 驗證通過了就觸發(fā)提交

‘submit(go)'這個其實就是綁定“提交按鈕”,還記得第一步讓你加的兩個屬性吧 lay-submit lay-filter=“go” ，懂了吧！go是可以隨便寫的

這里指的一提的是data.field這個東西，它會獲得 全部表單字段，名值對形式：{name: value}，

這樣我們在發(fā)送ajax的時候就不必自己去收集表單的字段值了

form.on('submit(go)', function(data){
  //console.log(data.elem);//被執(zhí)行事件的元素DOM對象，一般為button對象
  //console.log(data.form);//被執(zhí)行提交的form對象，一般在存在form標簽時才會返回
  //console.log(data.field); //當前容器的全部表單字段，名值對形式：{name: value}
  
  //發(fā)送ajax

  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
});

以上是“l(fā)ayui如何實現(xiàn)表單驗證”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！