虽然对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:设置触发提交的元素。

撒打发说到

layui---form表单模块的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. 避免layui form表单重复触发submit绑定事件

    个人博客 地址:http://www.wenhaofan.com/article/20180927002336 在使用以下代码监听lay-filter为editConfig的提交按钮后,当点击提交按钮 ...

  3. Layui form表单提交注意事项

    // 表单提交form.on('submit(first1)', function (data) { var articleFrom = data.field; $.ajax({ type:" ...

  4. layui form表单提交

    layui.use(['form'], function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function ...

  5. layui form表单自定义sm格式

    1. 新建以下sm样式,保存为layform_sm.css文件名,然后导入到layui.css的后面. .layui-input-sm,.layui-select-sm,.layui-textarea ...

  6. layUI form表单 防止多次点击重复提交

    //监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...

  7. layui form表单 input输入框获取焦点后 阻止Enter回车自动提交

    最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性 完美解决 <button type="button" class=&q ...

  8. Layui:前后端分离之Form表单

    页面效果图: <div style="display: none;" id="formContainer"> <form class=&quo ...

  9. 用layui前端框架弹出form表单以及提交

    第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...

  10. layui之表单验证

    这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...

随机推荐

  1. C#设置WebBrowser IE浏览器版本

    通过修改注册表的值,来指定winform程序打开的webBrowser的IE版本 1>方法一,通过程序修改注册表的值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  2. 国内的Android SDK镜像

    如果你不愿意改hosts文件,没有好的FQ工具,可以考虑使用国内的镜像源 1.南阳理工学院镜像服务器地址: mirror.nyist.edu.cn 端口:80 2.中国科学院开源协会镜像站地址: IP ...

  3. iOS链接库的冲突

    最近在打包的时候,遇到一个坑.特此记录一下 起因是发现 Unity 5.4 版本,使用c#写的下载,下载速度无法突破 2M/s,同样的网络,后来横向对比使用原来 Cocos2d 开始的游戏,可以达到 ...

  4. urllib 报错 IOError: [Errno socket error] TLS/SSL connection has been closed (EOF) (_ssl.c:590)

    解决方案: My evil workaround (don't do this in production!): import urllib2 #也可以是urllib import ssl ctx = ...

  5. [Algorithm] Fibonacci Sequence - Anatomy of recursion and space complexity analysis

    For Fibonacci Sequence, the space complexity should be the O(logN), which is the height of tree. Che ...

  6. mysql存储过程实例,查询多参数赋值

    drop procedure if exists p_for_create_customer; create procedure p_for_create_customer()begin declar ...

  7. C#调用系统打印机和收银钱箱

    打印示例: StringBuilder builder = new StringBuilder();builder.AppendLine("--------------打印测试------- ...

  8. grid - 隐式网格

    当网格项目确认在显式网格之外时就会创建隐性网格,当没有足够的空间或者显式的网格轨道来设置网格项目,此时网格项目就会自动创建隐式网格. 隐式网格可以定义:grid-auto-rows.grid-auto ...

  9. Android Activity的4种启动模式

    Activity的启动模式 standard 默认标志的启动模式,每次startActivity都是创建一个新的activity的实例,适用于绝大数情况 singleTop 单一顶部,如果要开启的ac ...

  10. 如何快速申请苹果IOS个人开发者账号

    在上周我有一同事,他利用周末的时间自己做了一个IOS版本游戏类APP,用Unity3D开发的(抱着好玩的心态),于是他想发布到苹果App Store 上去.他没有苹果开发者账号,也没有购买过. 于是找 ...