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="请输入密码">