LayUI

CSS类(Class)

1. layui-elem-quote

2. layui-text

3. layui-elem-field

4. laytui-field-title

5. layui-form

6. laytui-form-item

7. laytui-form-label

8. laytui-input-block

9. layui-input

10. layui-inline

11. layui-form-mid

12. layui-word-aux

13. layui-form-text

14. layui-textarea

15. layui-btn layui-btn-primary

16. layui-hide

17. layui-btn-container

18. layui-btn-sm

19. layui-btn-xs

20. layui-btn-md

21. layui-btn-danger

标签(HTML Element)

1. 'fieldset'
   'legend'用于表示其父元素的内容标题

2. 'select'
   'optgroup'可选
   - label
   'option'
   - value
   - selected
   - disabled

3. 'input'

   • type
     text
     tel
     password
     checkbox

   • checked

   • value

   • name

4. 'select'

5. 'div'

   • pane

6. 'textarea'

   • placeholder

7. 'button'

   • type
     submit
     reset
     text

LayUI框架属性

lay-verify
Layui框架有自带的表单验证功能，在input标签中加入lay-verify属性，通过给定不同属性值，来对表单输入框进行不同的验证

layui 表单自带校验：
1. lay-verify：是表单验证的关键字
2. 其中对其指定不同值可实现简单验证
3. required (该输入框必填项)
4. phone（手机号）
5. email（邮箱）
6. url（网址）
7. number（数字）
8. date（日期）
9. identity(身份证)
10. title(标题)
同时Layui支持多条规则的验证：
格式：lay-verify=”验证A|验证B”
例如：lay-verify=”require|phone|number”
这表示此处填入为 手机号，必须为数字，且为必填项。

lay-skin
primary
switch

lay-text="ON|OFF"

layui-submit

lay-event

lay-search

LayUI Script

layui.use(['form','layedit','laydate','table'],function(){});

laydate.render({
elem:'#id'
});

table.render({
elem:'#id'
,url:'xx.js'
,toolbar:'#id'
,title:''
,totalRow:true
,cols:[[
{type:'checkbox',fixed:'left'}
,{field:'',title:'',fixed:'',unresize:,sort:,totalRowText:'',width:,edit:,templet:function(res){
return ''+res.email+''
},toolbar:'#barDemo'}
]]
,page:true
});

var editIndex = layedit.build('LAY_demo_editor');

form.verify({});
title:function(value){
if(value.length'5){
return 'ERROR';
}
}
pass:[
/^[1]{6,12}$/
,'提示'
]

content:function(value){
layedit.sync(editIndex);
}

form.on('switch(switchTest)',function(data){});//lay-filter
lay.msg('',{
offset:'6px'
});
layer.tips('提示', data.othis)
layer.alert(JSON.stringify(data.field),{
title:''
});

layui.$('#id').on('click',function(){});
form.val('example',{});//example为lay-filter
"":"",
"",""

table.on('toolbar(test)',function(obj){});
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;

type="text/html"

---

1. \S ↩︎