layui學習筆記——表單模塊

一、使用

<form class="layui-form"> <!-- 提示：若是你不想用form，你能夠換成div等任何一個普通元素 -->
</form>

二、更新渲染 表單元素是動態插入時， Form模塊 的自動化渲染是會對其失效的，解決方法以下：

form.render(type, filter);

（1）type，爲表單的type類型，可選。默認對所有類型的表單進行一次更新，可局部刷新的type如：select、checkbox、radio。

form.render(); //更新所有
form.render('select'); //刷新select選擇框渲染

（2）filter，爲 class="layui-form" 所在元素的 lay-filter="" 的值。能夠藉助該參數，對錶單完成局部更新。

三、預設元素屬性

四、事件監聽

語法：form.on('event(過濾器值)', callback);

使用layui.onevent()自定義模塊事件時

（1）監聽select選擇 下拉選擇框被選中時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('select(filter)', function(data){
  console.log(data.elem); //獲得select原始DOM對象
  console.log(data.value); //獲得被選中的值
  console.log(data.othis); //獲得美化後的DOM對象
});

（2）監聽checkbox複選 複選框點擊勾選時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //獲得checkbox原始DOM對象
  console.log(data.elem.checked); //是否被選中，true或者false
  console.log(data.value); //複選框value值，也能夠經過data.elem.value獲得
  console.log(data.othis); //獲得美化後的DOM對象
});

（3）監聽switch開關 開關被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('switch(filter)', function(data){
  console.log(data.elem); //獲得checkbox原始DOM對象
  console.log(data.elem.checked); //開關是否開啓，true或者false
  console.log(data.value); //開關value值，也能夠經過data.elem.value獲得
  console.log(data.othis); //獲得美化後的DOM對象
});

（4）監聽radio單選 radio單選框被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('radio(filter)', function(data){
  console.log(data.elem); //獲得radio原始DOM對象
  console.log(data.value); //被點擊的radio的value值
});

（5）監聽submit提交 按鈕點擊或者表單被執行提交時觸發，其中回調函數只有在驗證所有經過後纔會進入，回調返回三個成員：

form.on('submit(*)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象，通常爲button對象
  console.log(data.form) //被執行提交的form對象，通常在存在form標籤時纔會返回
  console.log(data.field) //當前容器的所有表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。若是須要表單跳轉，去掉這段便可。
});

五、表單驗證 咱們對錶單的驗證進行了很是巧妙的支持，大多數時候你只須要在表單元素上加上lay-verify="value"便可。如：

<input type="text" lay-verify="email"> 
還同時支持多條規則的驗證，以下：
<input type="text" lay-verify="required|phone|number">

六、除了內置的校驗規則外，你還能夠自定義驗證規則，一般對於比較複雜的校驗，這是很是有必要的。

（1）定義：

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位，且不能出現空格'
  ] 
});

（2）使用

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