Layui 内置模块 (二) 表单 form

Layui 官网地址
表单模块文档 - layui.form
form 官方示例

简介

模块加载名称:form

我们通常会在最常用的模块上耗费更多的精力,用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见,form 是我们非常看重的一块。于是它试图用一贯极简的姿态,去捕获你对它的深深青睐。寄托在原始表单元素上的属性设定,及其全自动的初始渲染,和基于事件驱动的接口书写方式,会让你觉得,传统模式下的组件调用形式,也可以是那样的优雅、简单。然而文字的陈述始终是苍白的,所以用行动慢慢感受 layui.form 给你的项目带来的效率提升吧。

使用

layui 针对各种表单元素做了较为全面的UI支持,你无需去书写那些 UI 结构,你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点,你必须给表单体系所在的父元素加上class="layui-form",一切的工作都会在你加载完form模块后,自动完成。

预设元素属性

事件监听

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

监听submit提交

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

1
2
3
4
5
6
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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

再次温馨提示:上述的submit()中的 号为事件过滤器的值,是在你绑定执行提交的元素时设定的,如:

1
<button lay-submit lay-filter="*">提交</button>

你可以把*号换成任意的值,如:lay-filter=”go”,但监听事件时也要改成 form.on(‘submit(go)’, callback);

表单验证

我们对表单的验证进行了非常巧妙的支持,大多数时候你只需要在表单元素上加上 lay-verify=”” 属性值即可。如:

1
2
3
4
<input type="text" lay-verify="email"> 

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

除了内置的校验规则外,你还可以自定义验证规则,通常对于比较复杂的校验,这是非常有必要的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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位,且不能出现空格'
]
});

当你自定义了类似上面的验证规则后,你只需要把 key 赋值给输入框的 lay-verify 属性即可:

1
2
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<div class="layui-container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>修改用户信息</legend>
</fieldset>

<form class="layui-form" id="fm" th:object="${user}">
<div class="layui-form-item">
<input type="text" th:value="*{userId}" name="userId" hidden="hidden">
<input type="text" th:value="*{salt}" name="salt" hidden="hidden">
</div>

<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" th:value="*{userName}" name="userName" lay-verify="required|name" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" th:value="*{password}" name="password" lay-verify="required|pass" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" th:value="*{email}" name="email" lay-verify="required|email" placeholder="请输入邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户类型</label>
<div class="layui-input-block" th:if="${user.userType} eq '1'">
<input type="radio" name="userType" value="1" title="管理员" checked="checked"/>
<input type="radio" name="userType" value="2" title="VIP"/>
<input type="radio" name="userType" value="3" title="系统用户"/>
</div>
<div class="layui-input-block" th:if="${user.userType} eq '2'">
<input type="radio" name="userType" value="1" title="管理员"/>
<input type="radio" name="userType" value="2" title="VIP" checked="checked"/>
<input type="radio" name="userType" value="3" title="系统用户"/>
</div>
<div class="layui-input-block" th:if="${user.userType} eq '3'">
<input type="radio" name="userType" value="1" title="管理员"/>
<input type="radio" name="userType" value="2" title="VIP"/>
<input type="radio" name="userType" value="3" title="系统用户" checked="checked"/>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" th:text="*{remark}" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="edit">修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>

<script th:src="@{/js/ray-ui.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
layui.use(['form'], function () {
var form = layui.form;

// 自定义验证规则
form.verify({
name: [/(.+){2,20}$/, '用户名长度在 2-20 之间']
, pass: [/(.+){6,12}$/, '密码长度在 6-12 之间']
});

form.on('submit(edit)', function (data) {
$.ajax({
url: "/sysUser/user/edit",
type: "put",
data: $(data.form).serialize(),
success: function (result) {
if (result.code == web_status.SUCCESS) {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.msg(result.msg, {
icon: 1,
time: 2000
}, function () {
window.parent.location.reload();
parent.layer.close(index);
});
} else {
parent.layer.msg(result.msg, {
icon: 2
})
}
}
})
return false;
})
});
</script>

用户类型的臃肿,目前还没想到更好的解决办法。

效果