layui學習之11form表單相關的監聽事件

1.監聽submit提交事件

 

 

 首先要找到提交按鈕

 

 

 

 

form.on('submit(demo)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象
  console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回
  console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。

/*$.post();//異步提交*/

});

再次溫馨提示：上述的submit(demo)中的 demo為事件過濾器的值，是在你綁定執行提交的元素時設定的，如

 

<button lay-submit lay-filter="demo">提交</button>  

 

你可以把*號換成任意的值，如：lay-filter="go"，但監聽事件時也要改成 form.on('submit(go)', callback);

2:動態增加下拉列表

 

 

 

更新渲染

 

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制（因為我們叫經典模塊化框架，偷笑.gif） 但沒有關系，你只需要執行 form.render(type, filter); 方法即可。

第一個參數：type，為表單的 type 類型，可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表：

 

 

 

 

 

orm.render(); //更新全部
form.render('select'); //刷新select選擇框渲染
//……

 

 //給select 動態加一個options 並且渲染
        $("#addHobby").click(function () {
            //獲取下拉列表select
            var hobby = $("#hobby");
            alert(hobby.html());
            hobby.append("<option value=游戲>游戲</option>")
            //渲染
            form.render(); //更新全部
        })

表單驗證

我們對表單的驗證進行了非常巧妙的支持，大多數時候你只需要在表單元素上加上 lay-verify="" 屬性值即可。如：

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

上述對輸入框定義了一個郵箱規則的校驗，它會在 form 模塊內部完成。目前我們內置的校驗支持見上文的：預設元素屬性

除了內置的校驗規則外，你還可以自定義驗證規則，通常對於比較復雜的校驗，這是非常有必要的。

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