layui表单

表单坑总结

• 使用layui.form.val（""),进行表单取值
• select下来框需要layui.form.render("select")渲染才有样式
• 要触发表单校验，需要在提交按钮dom加上lay-submit，且==按钮和表单需要在同一个layui-form标签下==

表单校验

layui已有的校验类型

• required（必填项）
• phone（手机号）
• email（邮箱）
• url（网址）
• number（数字）
• date（日期）
• identity（身份证）

使用方式如下：lay-verify

<input name="operatorId" lay-verify="required" class="layui-input" type="text">

自定义校验规则

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

在弹框中添加表单提交触发

layer.open({
		type : 1,
		title : '添加角色',
		area : [ '500px', '350px' ],
		shadeClose : true, // 点击遮罩关闭
		content : html,
		btn : [ '保存', '取消' ],
		success : function(layero, index) { // 成功弹出后回调
			// 解决按enter键重复弹窗问题
			$(':focus').blur();
			// 添加form标识
			layero.addClass('layui-form');
			// 将保存按钮改变成提交按钮
			layero.find('.layui-layer-btn0').attr({
				'lay-filter' : 'addRole',
				'lay-submit' : ''
			});
			// 表单验证
			form.verify({
				roleName : function(value, item) {
					if (!new RegExp("^[a-zA-Z0-9_|\u4e00-\u9fa5\]{2,10}$")
							.test(value)) {
						return '角色名必须为2-10位且不能有特殊字符';
					}
				},
				roleDesc : function(value, item) {
					if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\]{2,200}$")
							.test(value)) {
						return '角色描述必须为2-200位且不能有特殊字符';
					}
				}
			});
			// 刷新渲染(否则开关按钮会不显示)
			form.render('checkbox');
		},
		yes : function(index, layero) { // 确认按钮回调函数
		layui.form.on('submit(formSubmit)', function(data) {
                    //校验数据
                    _DNA.addData(_DNA.getAddData());
                });
		},
		btn2 : function(index, layero) { // 取消按钮回调函数
			layer.close(index); // 关闭弹出层
		}
	});