layui---form表單模塊


雖然對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:設置觸發提交的元素。

撒打發說到


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM