1.<input type='text' layui-verify="**">中,layui-verify属性代表表单的验证,"**"为验证规则的名字/算法。
验证规则的定义:
form.verify({
password:[/^[\S]{6,12}$/],
username: function(value,item){
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){return "用户名不能有特殊字符";}
if (/(^\_)|(\__)|(\_+$)/.test(value)){ return '用户名首尾不能出现下划线\'_\'';}
if (/^\d+\d+\d$/.test(value)){ return '用户名不能全为数字';}
}
})
2.form表单更新渲染
(1). 表单的type类型,可更新。如select、checkbox、radio,
刷新/更新方法为form.render() ------更新全部;form.render('select') ------刷新select选择框渲染
(2)filter,为class="layui-form"所在元素的lay-filter=" "的值。
更新方式:form.render(null, 'tets1') 更新lay-filter='test1'所在容器内的全部表单状态
form.render('select', 'test2') 更新lay-filter="test2" 所在容器内的全部select状态
案例:<div class="layui-form" layui-filter="test1" >.......</div>
3.layui中预设元素属性
预设元素属性:lay-verify、lay-skin、lay-filter、lay-submit
预设元素可使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制
4.事件监听
语法:form.on('event(过滤器值)' ,callback)
form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名
form支持的事件为:select(监听select下拉选择事件)、checkbox(复选框勾选)、switch(复选框开关)、radio(单选框)、submit(表单提交事件)
默认情况下,事件所监听的是全部的form模块元素,如果只想监听一个元素,使用事件过滤器即可。如<select lay-filter="test" ></select>
form.on('select(test)' ,function(data){
console.log(data);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); ////得到美化后的DOM对象
}
form.on('submit(**)', function(data){
console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false;//阻止表单跳转。如果需要表单跳转,去掉这段即可。
}
5.表单赋值与取值,语法为form.val('filter的值',object)
赋值 form.val("formTest", {"username": **,"sex": "女"})
取值 var data1=form.val("formTest")