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