layui-form
一、表单类型
1.单行排列
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类
AI 代码解读
<div class="layui-form-item">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-block">
<!--layui-input-block 块级元素 -->
<input type="text" name="title" required lay-verify="required"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
AI 代码解读
2.多行排列
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<!--layui-input-inline行级元素 -->
<input type="password" name="password" required
lay-verify="required" placeholder="请输入密码" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required
lay-verify="required" placeholder="请输入密码" autocomplete="off"
class="layui-input">
</div>
</div>
AI 代码解读
3.下拉选择框
diabled用于选择内容的禁用
optgroup标签给select分组
selected="selected" 用于选中的默认选项
AI 代码解读
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
</div>
AI 代码解读
带模糊搜素的下拉框
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</div>
</div>
</div>
AI 代码解读
4.单选框
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男"> <input
type="radio" name="sex" value="女" title="女" checked> <input
type="radio" name="sex" value="禁" title="禁" disabled="disabled">
</div>
</div>
AI 代码解读
5.复选框
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值，否则选中时返回的就是默认的on
AI 代码解读
<!-- 复选框 -->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作"> <input
type="checkbox" name="like[read]" title="阅读" checked> <input
type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
AI 代码解读
6.文本域
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-inline">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
AI 代码解读
7.编辑器
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容"
class="layui-textarea layui-hide" id="LAY_demo_editor"></textarea>
</div>
</div>
AI 代码解读
//创建编辑器
var editIndex = layedit.build('LAY_demo_editor', {
tool : [ 'strong' //加粗
, 'italic' //斜体
, 'underline' //下划线
, 'del' //删除线
, '|' //分割线
, 'left' //左对齐
, 'center' //居中对齐
, 'right' //右对齐
, 'link' //超链接
, 'unlink' //清除链接
, 'face' //表情
, 'image' //插入图片
, 'help' //帮助
]
})
AI 代码解读
二、表单的监听事件
1.监听提交事件
form.on('submit(demo1)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
AI 代码解读
2.单选器的监听
form.on('radio(radio)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
AI 代码解读
三、更新与渲染
更新下拉选择框的内容
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
AI 代码解读
$('#btn1').click(function(){
var gj=$('#ishere');
alert(gj.html());
gj.append('<option value="兰州">兰州</option>'); //追加HTML中的元素
alert(gj.html());
form.render('select'); //渲染以后进行更新
})
AI 代码解读
四、表单数据初始化
$('#btn2').click(function(){
form.val('dataFrm', {
//绑定form表单
name:"小明",
password:"123456" //添加对应表单中name的名称以及要初始化的值
})
});
AI 代码解读
五、表单数据的校验
lay-verify="" 表示表单数据不能为空
<input type="text" lay-verify="email">
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">
AI 代码解读
自定义验证方式
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位，且不能出现空格'
]
})
AI 代码解读
好了，今天的分享就到这里了
