layui原生表單驗證的實例

更新時間：2019年09月09日 15:26:01 作者：小瑯琊

今天小編就為大家分享一篇layui原生表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

value：

required（必填項）
phone（手機號）
email（郵箱）
url（網(wǎng)址）
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; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});
});

以上這篇layui原生表單驗證的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: