文章目录
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位,且不能出现空格'
]
});