Introduction to the use of layui framework form forms

Although I am familiar with layui, I have time today to take another look at the form module of layui.

1. Update rendering

layui does not have a two-way binding mechanism, but with a classic modular framework, you only need to execute the following method:

form.render(type, filter)

The first parameter: type

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
[select,checkbox,radio] //刷新[select选择框,checkbox复选框(含开关)][radio]渲染

The second parameter: filter [can be used for local updates] is the lay-filter of the element where class="layui-form" is located ="" value. You can use this parameter to complete partial updates to the form.

<div class="layui-form" lay-filter="test1"></div>
<div class="layui-form" lay-filter="test2"></div>
<script>
form.render(null, &#39;test1&#39;); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render(&#39;select&#39;, &#39;test2&#39;); //更新 lay-filter="test2" 所在容器内的全部 select 状态
</s

2. Default element attributes

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

Specific reference:

title: [Any value] Set the element name, used for checkbox, radio

lay-skin: [switch (switch style) primary (original style)] Set the element style, only valid for checkbox

lay-filter: time filter, similar to a selector, used for exact matching

lay-verify: [required (required), phone (mobile phone number), email (mailbox), url (website), number (number), date (date), identity (ID card)] used in forms Verification, supports multiple verification rules at the same time lay-verify="required|phone"

lay-verType: [tips (adsorption layer), alert (bullet box), msg (default)]: Set the exception prompt layer

lay-submit: Set the element that triggers submission.

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to the use of layui framework form forms. For more information, please follow other related articles on the PHP Chinese website!