文档章节

layui学习笔记——表单模块

一个yuanbeth
 一个yuanbeth
发布于 2017/09/09 08:10
字数 913
阅读 94
收藏 0
点赞 0
评论 6

1、使用

<form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
</form>

2、更新渲染 表单元素是动态插入时, Form模块 的自动化渲染是会对其失效的,解决方法如下:

form.render(type, filter);

(1)type,为表单的type类型,可选。默认对全部类型的表单进行一次更新,可局部刷新的type如:select、checkbox、radio。

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

(2)filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。可以借助该参数,对表单完成局部更新。

3、预设元素属性

输入图片说明

4、事件监听

语法:form.on('event(过滤器值)', callback);

使用layui.onevent()自定义模块事件时

输入图片说明

(1)监听select选择 下拉选择框被选中时触发,回调函数返回一个object参数,携带两个成员:

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});      

(2)监听checkbox复选 复选框点击勾选时触发,回调函数返回一个object参数,携带两个成员:

form.on('checkbox(filter)', 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对象
});        

(3)监听switch开关 开关被点击时触发,回调函数返回一个object参数,携带两个成员:

form.on('switch(filter)', 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对象
});  

(4)监听radio单选 radio单选框被点击时触发,回调函数返回一个object参数,携带两个成员:

form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});  

(5)监听submit提交 按钮点击或者表单被执行提交时触发,其中回调函数只有在验证全部通过后才会进入,回调返回三个成员:

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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

5、表单验证 我们对表单的验证进行了非常巧妙的支持,大多数时候你只需要在表单元素上加上lay-verify="value"即可。如:

<input type="text" lay-verify="email"> 
还同时支持多条规则的验证,如下:
<input type="text" lay-verify="required|phone|number">

6、除了内置的校验规则外,你还可以自定义验证规则,通常对于比较复杂的校验,这是非常有必要的。

(1)定义:

form.verify({
  username: function(value, item){ //value:表单的值、item:表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
  }
  //我们既支持上述函数式的方式,也支持下述数组的形式
  //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位,且不能出现空格'
  ] 
});    

(2)使用

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

© 著作权归作者所有

共有 人打赏支持
一个yuanbeth
粉丝 75
博文 84
码字总数 48851
作品 0
深圳
程序员
加载中

评论(6)

一个yuanbeth
一个yuanbeth

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?

回复@xayxay : 请说,看看我能不能帮上忙
留个联系方式吧,在这上说不清

多描述下总能描述清楚的

引用来自“xayxay”的评论

那个也解决了,现在只有一个问题了,就是我是用table.render()渲染了一个数据表格,如何在别的function中重载这个表格
看官网,官网比较全:http://www.layui.com/doc/modules/table.html
xayxay
xayxay

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?

回复@xayxay : 请说,看看我能不能帮上忙
留个联系方式吧,在这上说不清

多描述下总能描述清楚的
那个也解决了,现在只有一个问题了,就是我是用table.render()渲染了一个数据表格,如何在别的function中重载这个表格
一个yuanbeth
一个yuanbeth

引用来自“xayxay”的评论

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?

回复@xayxay : 请说,看看我能不能帮上忙
留个联系方式吧,在这上说不清

多描述下总能描述清楚的
xayxay
xayxay

引用来自“我是程序yuan”的评论

引用来自“xayxay”的评论

在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?

回复@xayxay : 请说,看看我能不能帮上忙
留个联系方式吧,在这上说不清
一个yuanbeth
一个yuanbeth

引用来自“xayxay”的评论

在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?

回复@xayxay : 请说,看看我能不能帮上忙
xayxay
xayxay
在么,按照你的方法,分页什么都做出来了,就是表单有些问题可以请教下么?
Layui 1.0.3 发布,经典模块化前端 UI 解决方案

Layui 1.0.3 发布了。 更新日志 集成 layer 3.0 重点增加导航菜单的二级菜单支持(水平导航和树形导航都支持) 表单select增加optgroup的分组支持 富文本编辑器新增获取选中内容的方法:lay...

贤心 ⋅ 2016/11/10 ⋅ 20

Laravel+Layer 图片上传功能整理

♩ 背景 昨天在自己的 框架项目中,希望集成 的图片上传功能 但是在 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 框架以外运行,发现代码是没有问题的,因...

moTzxx ⋅ 01/04 ⋅ 0

JEECG 3.7.1 版本发布,企业级 JAVA 快速开发平台

JEECG 3.7.1 版本发布,企业级JAVA快速开发平台 ———————————————————————————————————————— Version: Jeecg3.7.1 项 目: JEECG 企业级快速开发平台...

Jeecg ⋅ 2017/09/17 ⋅ 0

python资料全集

python: 微信公众号开发小记——2.80端口上的服务 python: 微信公众号开发小记——3.接入三方登录 使用python编写一个壁纸网站的简单爬虫 python: python List 用法 Python 中各个时间复杂度...

d_watson ⋅ 2016/04/15 ⋅ 0

layui 1.0.7 发布,修复紧急 BUG

layui 1.0.7 发布,修复紧急 BUG。 # v1.0.7 2016-11-30 修复因发布 1.0.6 时对构建工具gulpfile进行了一些重写,导致css在压缩后前面多出了一个分号,引发的一些列样式问题 --- # v1.0.6 2...

贤心 ⋅ 2016/11/30 ⋅ 4

Request —— 让 Node.js http请求变得超简单

先前一直比较关注前端的东西,对后端了解较少。不过一直对Node.js比较感兴趣,去年12月还去参加了阿里的CNODE交流聚会。 以后希望通过这里的博客分享一些学习Node.js的笔记。一方面总结了自己...

无缘的缘分 ⋅ 2014/01/14 ⋅ 1

layui 2.2.0 发布,经典模块化前端 UI 框架

本次主要核心还是在 table 模块。无论是从代码,还是文档和示例的撰写上,都进行了大量调整。除此之外,form 以及其它的几项改进,也堪称良心之举,这应该会是一次令人愉悦的更新吧。。 首页...

贤心 ⋅ 2017/11/15 ⋅ 45

Python GDAL课程笔记

说明: 这是一份来自网上的学习笔记,教程来自于犹他州立大学,课程名称为:Geoprocessing with Python using Open Source GIS 。 这份教程在网上有几个网站进行过发布,也无从判断哪份才是原...

openthings ⋅ 2016/04/25 ⋅ 0

Mini 容器学习目录

Mini 容器学习笔记1——环境搭建(基础篇) Mini 容器学习笔记2——组件元数据(基础篇) Mini 容器学习笔记3——组件的注册(基础篇) Mini 容器学习笔记4——组件的生命周期(应用篇) Mini 容器学...

netcasewqs ⋅ 2011/08/26 ⋅ 0

Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang ⋅ 2017/12/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa ⋅ 今天 ⋅ 0

Spring mvc DispatchServlet 实现原理

在Spring中, ContextLoaderListener只是辅助类,在web 容器启动的时候查找并创建WebApplicationContext对象,通过该对象进行加载spring的配置文件。而真正的逻辑实现其实是在DispatcherSer...

轨迹_ ⋅ 今天 ⋅ 0

Weex起步

本教程假设你已经在你的本地环境安装了node 其实weex起步教程在 https://github.com/lilugirl/incubator-weex 项目说明文件中都已经有了,但为了有些同学看到英文秒变文盲,所以这里我重新写...

lilugirl ⋅ 今天 ⋅ 0

Jenkins实践1 之安装

1 下载 http://mirrors.jenkins.io/war/latest/jenkins.war 2 启动 java -jar jenkins.war 前提:安装jdk并配置环境变量 启动结果节选: ************************************************......

晨猫 ⋅ 今天 ⋅ 0

组合数学 1-2000 中,能被6或10整除的数的个数

1--2000 中,能被6或10整除的数的个数 利用集合的性质 能被6整除的个数 2000/6 = 333 能被10整除的个数 2000/10 = 200 能被6和10整除的个数 2000/30 = 66 能被6或10整除的个数 333+200-66 =...

阿豪boy ⋅ 今天 ⋅ 0

一篇文章学懂Shell脚本

Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合。 Shell可以直接使用在win/Unix/Linux上面,并且可以调用...

Jake_xun ⋅ 今天 ⋅ 0

大数据工程师需要精通算法吗,要达到一个什么程度呢?

机器学习是人工智能的一个重要分支,而机器学习下最重要的就是算法,本文讲述归纳了入门级的几个机器学习算法,加大数据学习群:716581014一起加入AI技术大本营。 1、监督学习算法 这个算法由...

董黎明 ⋅ 今天 ⋅ 0

Kylin 对维度表的的要求

1.要具有数据一致性,主键值必须是唯一的;Kylin 会进行检查,如果有两行的主键值相同则会报错。 2.维度表越小越好,因为 Kylin 会将维度表加载到内存中供查询;过大的表不适合作为维度表,默...

无精疯 ⋅ 今天 ⋅ 0

58到家数据库30条军规解读

军规适用场景:并发量大、数据量大的互联网业务 军规:介绍内容 解读:讲解原因,解读比军规更重要 一、基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务、行级锁、并发性能更好、CPU及...

kim_o ⋅ 今天 ⋅ 0

代码注释中顺序更改 文件读写换行

`package ssh; import com.xxx.common.log.LogFactory; import com.xxx.common.log.LoggerUtil; import org.apache.commons.lang3.StringUtils; import java.io.*; public class DirErgodic ......

林伟琨 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部