《layui宇宙版教程》：表单模块form-优快云博客

本文链接：https://blog.youkuaiyun.com/ghyghost/article/details/108116083

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.24 表单模块form

模块加载名称：form。

1.24.1 表单基本使用

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<label class="layui-form-label">下拉选择框</label>

</select>

</div>

</div>

</div>

</div>

</div>

<label class="layui-form-label">请填写描述</label>

</div>

</div>

</form>

layui.use('form', function() {

var form = layui.form;

//各种基于事件的操作，下面会有进一步介绍

});

</script>

</body>

</html>

　　运行效果如图1-xx所示。

部分表单没有渲染出来，更改javascript代码，执行render()方法，示例代码如下：

layui.use('form', function() {

var form = layui.form;

form.render();

//各种基于事件的操作，下面会有进一步介绍

});

</script>

运行效果如图1-xx所示。

成功渲染出表单。

1.24.2 更新渲染

有些时候，表单元素可能是动态创建并添加的，这时form模块的自动化渲染是失效的，这时只需要执行form.render(type, filter); 方法即可。

第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次渲染更新，可局部刷新的type值如图1-xx所示。

注意：想要UI被成功渲染，必须给表单所在的父元素加上class="layui-form"类样式。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>layui.form小例子</title>

</head>

<body>

</select>

</form>

<br />

var form = layui.form;

$(document).ready(function () {

$("#createNewElement").click(function () {

var newText = $("<input type='text' class='layui-input'>");

$("#newDiv").append(newText);

$("#newDiv").append("<br/>");

var newSelect = $("<select></select>");

var newOption1 = $("<option></option>");

$(newOption1).val(1);

$(newOption1).text(1);

var newOption2 = $("<option></option>");

$(newOption2).val(2);

$(newOption2).text(2);

$(newSelect).append(newOption1);

$(newSelect).append(newOption2);

$("#newDiv").append(newSelect);

form.render("select");

$("#newDiv").append("<br/>");

var newCheckbox1 = $("<input type='checkbox' class='layui-input' lay-skin='primary'>");

var newCheckbox2 = $("<input type='checkbox' class='layui-input' lay-skin='primary'>");

$("#newDiv").append(newCheckbox1);

$("#newDiv").append(newCheckbox2);

form.render("checkbox");

$("#newDiv").append("<br/>");

var newRadio1 = $("<input type='radio' name='sex' class='layui-input'>");

var newRadio2 = $("<input type='radio' name='sex' class='layui-input'>");

$("#newDiv").append(newRadio1);

$("#newDiv").append(newRadio2);

form.render("radio");

});

</script>

</body>

</html>

第二个参数：filter，为class="layui-form"所在元素的lay-filter=""的值，可以借助该参数对表单完成局部更新，示例代码如下：

【HTML】

…

</div>

…

</div>

【JavaScript】

form.render(null, 'test1'); //更新lay-filter="test1"所在容器内的全部表单状态

form.render('select', 'test2'); //更新lay-filter="test2"所在容器内的全部select状态

//……

1.24.3 预设元素属性

如图1-xx所示的基础属性可以应用在标签上。

标签应用基础属性的示例代码如下：

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required"

lay-verType="tips" lay-reqText="账号不能为空!">

</div>

</div>

</div>

</div>

<label class="layui-form-label">原始复选框</label>

</div>

</div>

</form>

layui.use('form', function() {

var form = layui.form;

form.render();

//各种基于事件的操作，下面会有进一步介绍

});

</script>

</body>

</html>

1.24.4 事件监听

语法：form.on('event(过滤器值)', callback);

form模块在Layui事件机制中注册了专属事件，所以当使用layui.onevent()自定义模块事件时，请勿占用form默认事件名，form默认支持的事件名如图1-xx所示。

默认情况下，事件所监听的是全部的form模块元素，但如果只想监听某一个元素，使用事件过滤器即可，示例代码如下：

form.on('select(test)', function(data){

console.log(data);

});

1.24.5 监听select选择

下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员，示例代码如图1-xx所示。

请注意：如果想监听所有的select，去掉过滤器(filter)即可。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<label class="layui-form-label">下拉选择框</label>

</select>

</div>

var form = layui.form;

form.render();

form.on('select(aihao)', function(data) {

console.log(data.elem); //得到select原始DOM对象

console.log(data.value); //得到被选中的值

console.log(data.othis); //得到美化后的DOM对象

});

</script>

</body>

</html>

1.24.6 监听checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员，测试代码如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var form = layui.form;

form.render();

form.on('checkbox(sameGroup)', function(data) {

console.log(data.elem); //得到select原始DOM对象

console.log(data.value); //得到被选中的值

console.log(data.othis); //得到美化后的DOM对象

});

</script>

</body>

</html>

1.24.7 监听switch开关

开关被点击时触发，回调函数返回一个object参数，携带两个成员，测试代码如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var form = layui.form;

form.render();

form.on('switch(myswitch)', 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对象

});

</script>

</body>

</html>

1.24.8 监听radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员，示例代码如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var form = layui.form;

form.render();

form.on('radio(sex)', function(data) {

console.log(data.elem); //得到radio原始DOM对象

console.log(data.value); //被点击的radio的value值

});

</script>

</body>

</html>

1.24.9 监听submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员，示例代码如图1-xx所示。

温馨提示：上述的submit(*)中的*星号为事件过滤器的值，示例代码如图1-xx所示。

可以把*号换成任意的值，如：lay-filter="go"，但监听事件时也要改成：

form.on('submit(go)', callback);

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</form>

var form = layui.form;

form.render();

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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

});

</script>

</body>

</html>

1.24.10 表单赋值/取值

语法：form.val('filter', object);

用于给指定表单集合的元素赋值和取值。如果object参数存在，则为赋值；如果object参数不存在，则为取值。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

<label class="layui-form-label">请填写描述</label>

</div>

</div>

</div>

<label class="layui-form-label">下拉选择框</label>

</select>

</div>

</div>

</div>

</form>

var form = layui.form;

layui.use('form', function() {

var form = layui.form;

form.render();

//各种基于事件的操作，下面会有进一步介绍

});

$(document).ready(function() {

$("#setButton").click(function() {

//formTest即class="layui-form"所在元素属性lay-filter=""对应的值

form.val("formTest", {

"username": "我是账号"

});

form.val("formTest", {

"password": "我是密码"

});

form.val("formTest", {

"bigtext": "我是大文本"

});

form.val("formTest", {

"sex": "0"

});

form.val("formTest", {

"myswitch": true

});

form.val("formTest", {

"interest": 1

});

form.val("formTest", {

"like[write]": true

});

$("#getButton").click(function() {

//获取表单区域所有值

var data1 = form.val("formTest");

alert(data1);

});

</script>

</body>

</html>

1.24.11 表单验证

Layui对表单的验证进行了非常巧妙的支持，大多数时候只需要在表单元素上加上lay-verify=""属性值即可，示例代码如图1-xx所示。

上述对输入框定义了一个邮箱规则的校验，它会在form模块内部完成。

除了内置的校验规则外，还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的，示例代码如图1-xx所示。

当自定义了类似上面的验证规则后，只需要把key赋值给输入框的lay-verify属性即可，示例代码如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</form>

var form = layui.form;

form.verify({

isExistsUsername: function(value, item) { //value：表单的值、item：表单的DOM对象

if (value == '中国') {

return '用户名"中国"已经存在，不能重复注册！';

}

});

</script>

</body>

</html>