layUi框架入门篇(三)
来源:互联网 发布:软件系统的可靠性 编辑:程序博客网 时间:2024/05/22 01:40
部分Js代码拆解分析
上一次的笔记中初步使用了官方文档中的示例在自己的项目中跑了一遍,成功,而且功能很完善。视觉效果也挺不错,HTML和CSS部分的引用代码没有难点,今天就来分析一下JS中的代码实现以及部分控件的功能实现。
首先贴出JS中的代码:
<script>layui.use(['form', 'layedit', 'laydate'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,content: function(value){ layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; });});</script>
layui.use()不用说,引入依赖模块[‘form’, ‘layedit’, ‘laydate’]并赋值调用相应模块接口,首先来看laydate这个模块:
laydate.render({ elem: '#date' }); 函数原型:laydate.render([options]); options为控件参数。
从示例中可以看出空间参数才用key/value的赋值形式,laydate有一些基础参数(参考官网的开发文档)
elem:指定元素 ,‘#date’是指id为date的元素。
type:控件选择类型。相当于选择这个日期控件是选择年呢还是年月呢还是年月日呢?就类似于java里的日期类的format,指定一个日期类型。
type也有一些参数选择:
range:开启左右面板范围选择 。类型:Boolean/String,默认值:false
如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。emmmm我没怎么懂这个是啥,不过感觉不太重要,结合具体的控件看看就好。
下面真的还有多参数,具体可以参考官网的对应开发文档,都比较简单易懂,还可以定义一些回调函数,非常方便
接下来来看看编辑器模块’layedit’:
var editIndex = layedit.build('LAY_demo_editor');
函数原型:layedit.build(id,options)
id即为元素id,options和前面的laydate的options一样为编辑框的基本参数,也同样才用key/value的形式赋值。
至于 var editIndex = layedit.build(‘LAY_demo_editor’);的操作是将用于得到build方法返回的索引,嗯,我目前也不懂可以干啥,不过官方文档中说也提供很多编辑方法,非常实用:
关于编辑器的基础设置这里就不赘述了,和laydate的形式一样,具体可以参考官方开发文档
接下来就是自定义验证规则:
form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,content: function(value){ layedit.sync(editIndex); } });
这是表单模块中提供的自定义验证规则,先让我们来看看简单的,即layui已经帮我们集成的验证规则,只需要在表单元素上加上lay-verify=”value”即可,value可以是一个也可以是多个,例如:
<input type="text" lay-verify="email"> 还同时支持多条规则的验证,如下:<input type="text" lay-verify="required|phone|number">
同时也支持自定义规则:
layui.codeform.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位,且不能出现空格' ] });
参考官网的模型,form.verify(options);中也是才用key/value的形式,
例如 username:function(value,item){}中username是这个验证的名字,function即验证体,观察发现验证体可能有两种,一种是function(value,item){}的方法体形式(其中value是表单元素中的值,item是元素对象,可以不填好像,填的话DOM对象也很好提取的),还有一种是[reg,error]的形式,即[正则表达式,错误提示文本].方法体中的错误提示文本则才用return的形式返回。
最后是表单的监听:
//监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; });
函数原型:form.on(‘event(过滤器值)’, callback);
这些是form专属的event的值
默认是监听所有元素,如果监听个别元素,可以用事件选择器,同时指定过滤器的值:
例如:<select lay-filter="test"></select>
其中lay-filter=“XXX”即是过滤器值。
在回调函数中定义事件监听的操作即可。
今天的学习记录就到这里吧,嗯,作为一个前端小白的我在慢慢理解慢慢成长。
- layUi框架入门篇(三)
- layUi框架入门篇(一)
- layUi框架入门篇(二)
- 三大框架(入门)
- layui的框架导入
- layui前端UI框架
- Quartz 框架快速入门(三)
- Quartz 框架快速入门(三)
- MvvmLight框架使用入门(三)
- Quartz 框架快速入门(三)
- Layui 经典模块化前端框架
- Java三大框架入门-struts2入门(一)
- layui
- [layui
- layui
- LayUi
- JAVA三大框架入门
- 32、shiro 框架入门三
- java.lang.IllegalArgumentException
- 自定义view实现圆形加载效果
- 关键路径计算
- 一些自己不会的小函数用法
- UCOSII启动流程详解(结合源码分析)
- layUi框架入门篇(三)
- 网页编程--JavaScript之function()
- 数据库事物的四大特性
- LeetCode Subtree of Another Tree
- Error:org.gradle.api.internal.changedetection.state.DefaultFileCollectionSnapshotter
- 网络流24题-13
- [莫队]luogu3674 小清新人渣的本愿
- Upgrade to Oracle Database 12c OCP 1z0-060 No.1
- archlinux安装教程以及自己踩过的坑