雖然對layui比較熟悉了,但是今天有時間還是將layui的form表單模塊重新看一下。
https://www.layui.com/doc/modules/form.html
一、更新渲染
layui沒有雙向綁定機制,但是有經典模塊化框架 只需要執行下面的方法即可:
form.render(type,filter)
第一個參數:type
form.render(); //更新全部 form.render('select'); //刷新select選擇框渲染 [select,checkbox,radio] //刷新[select選擇框,checkbox復選框(含開關)][radio]渲染
第二個參數:filter【可用於局部更新】為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數,對表單完成局部更新。
<div class="layui-form" lay-filter="test1"></div> <div class="layui-form" lay-filter="test2"></div> <script> form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器內的全部表單狀態 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態 </s
二、預設元素屬性
<input type="text" lay-verify="email"> <input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密"> <button lay-submit>提交</button>
具體參考:
title:【任意值】設置元素名稱,用於 checkbox,radio
lay-skin:【switch(開關風格) primary(原始風格)】設置元素風格,只對checkbox有效
lay-filter:時間過濾器,類似於選擇器,用於精確匹配
lay-verify:【required(必填項),phone(手機號),email(郵箱),url(網址),number(數字),date(日期),identity(身份證)】用於表單驗證,同時支持多條驗證規則 lay-verify="required|phone"
lay-verType:【tips(吸附層),alert(彈框),msg(默認)】:設置異常提示層
lay-submit:設置觸發提交的元素。
撒打發說到