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

創新互聯建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計制作、網站設計、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的臺安網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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

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

value：

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

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

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

2. 說一下自定義驗證

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

使用的方法就跟"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 '用戶名首尾不能出現下劃線\'_\'';
      }
      if(/^\d+\d+\d$/.test(value)){
        return '用戶名不能全為數字';
      }
    }

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

3. 驗證通過了就觸發提交

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

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

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

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

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

以上是“layui如何實現表單驗證”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁題目：layui如何實現表單驗證-創新互聯
URL鏈接：http://www.yijiale78.com/article0/cshooo.html

成都網站建設公司_創新互聯，為您提供用戶體驗、網站內鏈、網站設計公司、微信公眾號、靜態網站、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯