最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • layui表单

    正文概述 掘金(半路出家当了和尚)   2021-01-06   746

    表单坑总结

    • 使用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); // 关闭弹出层
    		}
    	});
    

    下载网 » layui表单

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元