- 博客(0)
- 资源 (1)
- 收藏
- 关注
LayuiForm表单.txt
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。
select option select 实现下拉选
callback 是回调函数
layui.模块 模块可以是layui已经存在的模块,也可以通过layui.define([mods], callback) 来自己自定义模块。
如果想要使用模块首先要做的必然是加载模块,layui.use(['laypage', 'layedit'], function(){});
接下来使用layui风格控件
其实感觉layui帮我们定义好了CSS和许多JS文本,我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。
layu官方文档的命名规范为:
CSS命名规范
class命名前缀:layui,连接符:-,如:class="layui-form"
命名格式一般分为两种:
一:layui-模块名-状态或类型
二:layui-状态或类型
因为有些类并非是某个模块所特有,他们通常会是一些公共类。如:
一(定义按钮的原始风格):class="layui-btnlayui-btn-primary"
二(定义内联块状元素):class="layui-inline"
1
2
3
4
5
6
7
8
9
当然还有前面提到的使用模块的js代码:
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;
});
});
下面我们按照官方文档的开发规范使用一下form表单的例子
表单集合演示
单行输入框
验证必填项
验证手机
验证邮箱
多规则验证
验证日期
验证链接
验证身份证
自定义验证
请填写6到12位密码
范围
-
单行选择框
</opt
2019-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人