1. Set class="layui-form" in a container to identify a form element block, and assemble various form elements through the standardized html structure and CSS class, and use the built-in form module to Complete various interactions.
2. The form element depends on the form module. (Please note: If the form module is not loaded, select, checkbox, radio, etc. will not be displayed, and form related functions cannot be used).
3. Form Container
3.1. Add the class="layui-form" attribute to the form element as a form container for layui:
<form class="layui-form" action="" method="post">
表单元素...
</form>4. Basic row block structure
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-inline">
原始表单元素区域
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>5. Preset form element attributes
5.1. Presetting the form element attributes can make some interactive operations within the form module, or you can use the JS interface provided by the form to accurately control. The currently supported attributes are shown in the following table:
6. Input box
6.1. class="layui-input": The general CSS class provided by layui.css.
6.2. lay-verify: Register the type of form module that needs to be verified.
<input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">7. Drop-down selection box
7.1. Enable the search matching function by setting the attribute lay-search:
<select name="city" lay-search>
<option value="">请选择一个城市</option>
<option value="0">北京</option>
<option value="1">郑州</option>
<option value="2">洛阳</option>
<option value="3">南阳</option>
<option value="4">开封</option>
</select>8. Checkbox
8.1. The attribute title can customize the text.
8.2. Property lay-skin can set the style of the check box. Generally do not write or lay-skin="primary".
<input type="checkbox" name="write" title="写作">
<input type="checkbox" name="read" title="阅读" checked>
<input type="checkbox" name="dai" lay-skin="primary" title="发呆">9. Switch
9.1. The attribute lay-text can customize the text of the switch in two states.
9.2. Property lay-skin can set the style of the check box. Usually lay-skin="switch".
<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">10. Single selection box
10.1. The attribute title can customize the text.
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>11. Text field
11.1. class="layui-textarea", the general CSS class provided by layui.css.
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>12. Assemble inline forms
12.1. class="layui-inline": Define the outer inline.
12.2. class="layui-input-inline": Define the inner line. (class="layui-input-block": Define the inner block.)
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>13. Ignore beautification rendering
13.1. After you can add the attribute lay-ignore to the form element, the label will not be beautified and rendered, that is, the system style will be retained, such as:
<select lay-ignore>
<option>…</option>
</select>14. Form box style
14.1. Set the frame style of the form by adding the class of layui-form-pane.
14.2. It is worth noting that checkboxes/switches/radio boxes, these combinations require additional pane attributes in this style (otherwise it will look awkward).
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>15. Update rendering
15.1. Sometimes, some of your form elements may be inserted dynamically. At this time, the automatic rendering of the form module will be invalid. But it doesn't matter, you only need to execute form.render(type, filter); method.
15.2. The first parameter: type is the type of the form, optional. By default, all types of forms are updated once. The types that can be partially refreshed are as follows:
form.render(); // 更新全部
form.render('select'); // 刷新select选择框渲染15.3. The second parameter: filter is the value of lay-filter="" of the element where class="layui-form" is located. You can use this parameter to complete partial updates to the form.
[HTML]
<div class="layui-form" lay-filter="test1">
...
</div>
<div class="layui-form" lay-filter="test2">
...
</div>
[JavaScript]
form.render(null, 'test1'); // 更新lay-filter="test1"所在容器内的全部表单状态
form.render('select', 'test2'); // 更新lay-filter="test2"所在容器内的全部select状态16. Event monitoring
16.1. Syntax: form.on('event(filter value)', callback);
16.2. The form module has registered exclusive events in the layui event mechanism, so when you use layui.onevent() to customize module events, do not occupy the form name. The events supported by form are as follows:
16.3. By default, the event listens to all the form module elements, but if you only want to listen to a certain element, use the event filter.
17. Monitor select selection
17.1. Triggered when the drop-down selection box is selected, the callback function returns an object parameter, which carries two members:
form.on('select', function(data){
console.log(data.elem); // 得到select原始DOM对象
console.log(data.value); // 得到被选中的值
console.log(data.othis); // 得到美化后的DOM对象
});18. Monitor checkbox check
18.1. Triggered when the check box is clicked, the callback function returns an object parameter, which carries two members:
form.on('checkbox(checkbox1)', 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对象
});19. Monitor switch
19.1. Triggered when the switch is clicked, the callback function returns an object parameter with two members:
form.on('switch', 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对象
}); 20. Monitor radio radio
20.1. Triggered when the radio radio button is clicked, the callback function returns an object parameter, which carries two members:
form.on('radio', function(data){
console.log(data.elem); // 得到radio原始DOM对象
console.log(data.value); // 被点击的radio的value值
});21. Monitor the submit submission
21.1. Triggered when the button is clicked or the form is executed and submitted, the callback function will only enter after the verification is all passed, and the callback returns three members:
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; // 阻止表单跳转。如果需要表单跳转, 去掉这段即可。
});22. Form assignment/value
22.1. Syntax: form.val('filter', object); is used to assign and take values to the elements of the specified form collection. If the object parameter exists, it is an assignment; if the object parameter does not exist, it is a value. The key value in the second parameter is the name and value corresponding to the form element.
// 给表单赋值
form.val("form1", { // class="layui-form"所在元素属性lay-filter="form1"对应的值
"city": 2
,"desc": "我是一个有理想的人。"
,"mobile": 13552464800
,"password": 123456
,"read": "阅读"
,"sex": "女"
,"title": "注册新用户"
,"switch": "register"
});
// 获取表单区域所有值
var form1Values = form.val("form1");23. Form validation
23.1. We have very clever support for form validation, most of the time you only need to add lay-verify="" attribute value to the form element.
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">23.2. In addition to the built-in verification rules, you can also customize the verification rules, which is usually necessary for more complex verification. After you customize the validation rules, you only need to assign the key to the lay-verify attribute of the input box.
<input type="text" name="title" lay-verify="required|title" placeholder="请输入标题" autocomplete="off" class="layui-input" />
// 自定义验证规则
form.verify({
title: function(value, item){
if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
return '标题内容是大小字母、数字、下划线';
}
if(value.length < 5){
return '标题也太短了吧';
}
if(value.length > 16){
return '标题也太长了吧';
}
}
});23.2. In the callback function of the form.verify() method, value: the value of the form; item: the DOM object of the form.
24 . Examples
24.1. Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单元素 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<form class="layui-form layui-form-pane" action="" method="post" lay-filter="form1">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="required|title" placeholder="请输入标题" autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">6-16位字母、数字、下划线组合</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-inline">
<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-search>
<option value="">请选择一个城市</option>
<option value="0">北京</option>
<option value="1">郑州</option>
<option value="2" selected="select">洛阳</option>
<option value="3">南阳</option>
<option value="4">开封</option>
</select>
</div>
</div>
<div class="layui-form-item" pane lay-filter="test1111">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="write" title="写作" value="写作" lay-filter="checkbox1">
<input type="checkbox" name="read" title="阅读" value="阅读" checked>
<input type="checkbox" name="dai" lay-skin="primary" title="发呆" value="发呆">
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="checked" value="register">
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" 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="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script type="text/javascript">
layui.use(['form', 'laydate'], function(){
var form = layui.form
,laydate = layui.laydate;
laydate.render({
elem: '#date'
,value: new Date()
,isInitValue: true
});
// 自定义验证规则
form.verify({
title: function(value, item){
if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
return '标题内容是大小字母、数字、下划线';
}
if(value.length < 5){
return '标题也太短了吧';
}
if(value.length > 16){
return '标题也太长了吧';
}
}
});
form.on('select', function(data){
console.log(data.elem); // 得到select原始DOM对象
console.log(data.value); // 得到被选中的值
console.log(data.othis); // 得到美化后的DOM对象
});
form.on('checkbox(checkbox1)', 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对象
});
form.on('switch', 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对象
});
form.on('radio', function(data){
console.log(data.elem); // 得到radio原始DOM对象
console.log(data.value); // 被点击的radio的value值
});
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; // 阻止表单跳转。如果需要表单跳转, 去掉这段即可。
});
var form1Values = form.val("form1");
console.log(form1Values);
});
</script>
</body>
</html>24.2. Effect picture
