其实这里才算真正的form的重点。下面来一样测试并且配上截图。

首先来展示下官网的例子得到的造型：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea 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="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</div>
<script>
layui.use('form', function () {
var form = layui.form;

//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

这里的样式就是官网的模型稍微改动了下。下面是截图：

***注意的点：表单体系所在的父元素加上class="layui-form"。

 

***接下来我们看一下相关的更新渲染。有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif） 但没有关系，你只需要执行 form.render(type, filter); 方法即可。这个很重要 。经常会出现动态绑定了下拉框但是死活出不来的情况。下面来演示一波。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" id="aihao" ></select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按钮</label>
<div class="layui-input-block">
<button class="layui-btn" id="btnInitCombox">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
$("#btnInitCombox").click(function () {
alert(1111);
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
//form.render('select', 'aihao')
});

});
//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

在动态给下拉框赋值之后，却没有重新渲染下拉框。可以看到下拉框是出不来的。此时我们需要使用form.render()。来初始化。

只需要在动态赋值之后加上下面的代码：

$("#btnInitCombox").click(function () {
alert(1111);
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
form.render('select', 'aihao')
});

*** form.render('select', 'aihao')中select表示的是要重新渲染的表单类型~下拉框/单选框等。。后面的aihao指的是你的filter也就是过滤器,这里指的是仅仅渲染lay-filter='aihao'的容器下面的select下拉框。当然你可以不这么写。有更省事得写法直接form.render();ok,所有的表单都会被初始化。下面来测试。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" id="aihao"></select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按钮</label>
<div class="layui-input-block">
<button class="layui-btn" id="btnInitCombox">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" id="aihao1"></select>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
$("#btnInitCombox").click(function () {
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
$('#aihao1').append(new Option("A", 1));
$('#aihao1').append(new Option("B", 2));
$('#aihao1').append(new Option("C", 3));
form.render('select', 'aihao');
//form.render();
});

});
//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

测试结果与预想完全一致。

***form.render(type, filter);方法具体使用：

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

eg:

  1. form.render(); //更新全部
  2. form.render('select'); //刷新select选择框渲染

 

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

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

 

 

接下来我们试一试表单的验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phone" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按钮</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {

});

});
</script>
</body>
</html>

测试的非空验证和手机号码验证都已经ok。但是layui有个问题就是比如你设定了手机验证，那么假如你这个手机号文本框传入空值，结果会被验证为手机号不正确。但是真正使用的时候，我们通常是假如用户填了则验证，没填则不去验证。所以这里要处理一下。代码如下：其实就是用form.verify定义新的验证。代码测试符合要求。

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phoneCanNull" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按钮</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
form.verify({
phoneCanNull: function (value, item) { //value：表单的值、item：表单的DOM对象
if (value != "") {
if (value!="12345678911") {
return '电话应该为12345678911\'_\'';
}
}

}
});
});

});
</script>
</body>
</html>

***接下来讲一下事件监听 其实有了前面的学习 这里很好懂了。语法：form.on('event(过滤器值)', callback);  下面是event支持的选项。

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

例如说你要监听下拉框的选择事件。只需要 ：

form.on('select(lay-filter)', function (data) {
alert(data.value)
});

 

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phoneCanNull" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按钮</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<select name="interest" lay-filter="test">
<option value="0">写作</option>
<option value="1">阅读</option>
</select>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
form.verify({
phoneCanNull: function (value, item) { //value：表单的值、item：表单的DOM对象
if (value != "") {
if (value!="12345678911") {
return '电话应该为12345678911\'_\'';
}
}

}
});

form.on('select(test)', function (data) {
alert(data.value)
});
});

});
</script>
</body>
</html>

其他的checkbox等监听同上。重要的东西基本就这么多。表单至此结束。