layui表单

layui表单

使用定义:

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
注意:
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
选择框未设置value时,选中状态默认返回为on

常用表单控件及对比

控件	含义
layui-form	用来标识一个表单元素块
class追加layui-form-pane	可以设定表单的方框风格(注意:复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性)
lay-verify	注册form模块需要验证的类型
lay-submit	提交表单
lay-filter	过滤/监听
lay-search	定义在select标签中可实现模糊搜索下拉框中的内容
lay-ignore	忽略美化渲染,保留系统风格
lay-skin=“primary”	设置复选框为原始风格
lay-skin=“switch”	设置按钮为开关样式 (复选框使用会导致title属性值无法显示)
lay-text	可自定义开关两种状态的文本(可以弥补上述所说的title属性值无法显示问题)
type=“password”	密码类型显示(不可见)
type=“radio”	单选,不可取消(同一个div内,必选其一)
type=“checkbox”	可选类型(再次点击取消选中状态)
type=“reset”	重置(不清空表单中默认的数据)
class=“layui-textarea”	文本域
class=“layui-input”	单行输入框
class=“layui-input-block”	不带边框的输入框/选择框
class=“layui-inline”	定义外层行内
class=“layui-input-inline”	定义内层行内
required	必填项
disabled	禁用
checked	默认选中状态
autocomplete=“off”	关闭记录提示=
<optgroup label="下拉选分组">	可以用此标签为下拉选进行分组
form.on()	监听(可以与lay-filter的属性值配合使用;注意:全局只有最后一个定义的监听可以生效,前面重复定义无效)form.on('submit(filter属性值)', function(data){})
function(data){}	回调函数data.field可获取表单中所有值(.name可以获取表单中对应的值)layer.msg(JSON.stringify(data.field.city));

更新渲染

当表单元素是动态插入的。这时 form 模块的自动化渲染是失效的。只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：
第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

参数(type)值	描述
select	刷新select选择框渲染
checkbox	刷新checkbox复选框(含开关)渲染
radio	刷新radio单选框渲染

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//过滤
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态

预设元素属性

例如:

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

预设元素可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前可支持的属性如下表所示：

属性名	属性值	说明
title	任意字符	设定元素名称,一般用于checkbox , radio框
lay-skin	switch(开关风格) , primary(原始风格)	定义元素的风格,目前只对checkbox元素有效,可将其转变为开关样式
lay-ignore	任意字符或不设置值	是否忽略元素美化处理. 设置后,将不会对该元素进行初始化渲染,即保留系统风格
lay-filter	任意字符	事件过滤器,主要用于时间的精确匹配,跟选择器比较类似. 它并不私属于form模块,它在layui的很多基于事件的接口中都会用到
lay-verify	required(必填项) , phone(手机号) , email(邮箱) , url(网址) , number(数字) , date(日期) , identity(身份证)	同时支持多条规则的验证,格式: lay-verify=“验证A\验证B” 例如: lay-verify=“required\phone\number” 注:可以自定义表单校验规则
lay-verType	tips(吸附层) , alert(对话框) , msg(默认)	可用于定义异常提示层
lay-reqText	任意字符	用于自定义必填项(即设定了lay-verify="required"的表单)的提示文本 注:layui2.5.0新增
lay-submit	不需要填值	绑定触发提交的元素,如button…

事件监听

语法：form.on(‘event(过滤器属性值)’, callback);
form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.on event()自定义模块事件时，请勿占用form名。form支持的事件如下：

event	描述
select	监听select下拉选择事件
checkbox	监听checkbox复选框勾选事件
switch	监听checkbox复选框开关事件
radio	监听radio单选框事件
submit	监听表单提交事件

注意:默认情况下,事件所监听的是全部的form模块元素,单如何只想监听某一元素,使用事件过滤器即可.

//下拉选择框
<select lay-filter="test"></select>
//javascript代码
form.on('select(test)',function(data){
	console.log(data);
});

监听select选择

注意：如果想监听所有的select，去掉过滤器(filter属性值)即可。下面将不再对此进行备注。
下拉选择框被选中时触发，回调函数返回一个object参数，携带3个成员：

form.on('select(filter属性值)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});   

监听checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带4个成员：

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对象
});  

监听switch开关

开关被点击时触发，回调函数返回一个object参数，携带4个成员：

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对象
});  

监听radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});  

监听submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

//form表单中内容
<button lay-submit lay-filter="*">提交</button>  
//javascript代码
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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

表单赋值/取值

语法：form.val(‘filter’, object);
用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。
注：其中「取值」功能为 layui 2.5.5 开始新增

//给表单赋值
form.val("formFilter",{//formFilter即 class="layui-form"所在元素属性 lay-filter="" 对应的值
	"username":"永亮", //"name":"value"
	"sex":"男",
	"auth":3,
	"check[write]":true,
	"open":false,
	"desc":"desc对应的值..."
});
//获取表单区域所有的值
var datal = form.val("formFilter");

表单验证

input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">
or
<input type="text" lay-verify="required\phone\number">

示例:

//form表单内容
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">
//javascript代码
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位，且不能出现空格'
  ] 
});