layui 相关问题

1、富文本数据同步

<div class="layui-input-inline" style="margin-right: 50px;">
     <textarea type="text" id="content" name="content" lay-filter="content" ></textarea>
</div>

<script>
    var layedit;
    var form
    var layeditIndex;
    layui.use(['form','layedit'], function () {
        form = layui.form;
        var $ = layui.jquery
        layedit = layui.layedit;

        //创建富文本对象
        layeditIndex = layedit.build('content',{
            height: 180 //设置编辑器高度
        }); //建立编辑器

    　　//同步富文本内容到到 textarea 文本框中,textarea标签中要加此属性 lay-filter=""
        form.verify({
            "content": function(){
                layedit.sync(layeditIndex)  //layeditIndex 为创建的富文本对象
            }
        })
    });
</script>

 

2、富文本赋值

<div class="layui-input-inline" style="margin-right: 50px;">
     <textarea type="text" id="content" name="content" lay-filter="content" ></textarea>
</div>

<script>
    var layedit;
    var form
    var layeditIndex;
    layui.use(['form','layedit'], function () {
        form = layui.form;
        var $ = layui.jquery
        layedit = layui.layedit;

        //创建富文本对象
        layeditIndex= layedit.build('content',{
            height: 180 //设置编辑器高度
        }); //建立编辑器

    　　
    　　//富文件赋值
    　　setTimeout(function () {//有时候可能是页面加载顺序问题赋值不成功，这里使用定时器延迟加载赋值
        　　layedit.setContent(layeditIndex,htmlspecialchars_decode(“<p>要赋值的内容</p>”));  //layeditIndex为创建的富文件对象
        　　form.render()
    　　},200)
    });

    //对富文本内容可能存在的标签符号进行转义
    function htmlspecialchars_decode(str) {
        str = str.replace(/&lt;/g, '<');
        str = str.replace(/&gt;/g, '>');
        str = str.replace(/&#40;/g, "(");
        str = str.replace(/&#41;/g, ")");
        str = str.replace(/&#39;/g, "\'");
        return str;
    }
</script>

 

　　

3. 监听select事件

<select  name="messageCode" lay-search lay-filter="messageCode">
</select>

<sdript>
　　layui.use(['layer', 'form'], function () {
    　　var layer = layui.layer, form = layui.form;
    　　form.on('select(messageCode)', function (data) { //messageCode为select标签的 lay-filter="messageCode"
        　　console.log(data.value); //data.value 为被选中的option的value值
    　　});
　　});
</script>

 

 4. 动态设置select被选中项; layui中引用JQ

layui.use('form', function ($, form) {
    var $ = layui.$;//重点在layui中引用JQ必须写这一句
    $("#resourceList").val(value); //resourceList为select标签的id, value 为 options中想要被选中的 value的值

});

 

5. Layui官方js正则验证手机号，邮箱，网址，日期，身份证。从官方js里挖出来的

正则表达式：
js正则验证手机号：/^1\d{10}$/

js正则验证邮箱：/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

js正则验证url：/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/

js正则验日期：/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/

js正则验证身份证：/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
（原文链接：https://blog.csdn.net/veloi/article/details/80757469）

使用方式：可以同时使用多个属性值
<input lay-verify="required|phone|url" >


verify: {
        required: [/[\S]+/, "必填项不能为空"],
        phone: [/^1\d{10}$/, "请输入正确的手机号"],
        email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
        url: [/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
        number: function(e) {
            if (!e || isNaN(e)) return "只能填写数字"
        },
        date: [/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
        identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
    }

 

6.layui自定义验证（校验）规则(注：使用自定义时验证错误表单也会提交)

<label class="layui-form-label">电话</label>
<div class="layui-input-inline">
    <input lay-verify="phone_user_defined" >
</div>

layui.use('form', function () {
    var form = layui.form;
     //自定义电话，邮箱验证
    form.verify({
        'phone_user_defined': function (value, item) {
            if(value.length>0){
                var reg=/^1\d{10}$/;
                if(!reg.test(value)){
                    layer.msg('请输入正确的手机号',{icon: 5});
                    return false;
                }
            }
        },
        'email_user_defined': function (value, item) {
            if (value.length > 0) {
                var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!reg.test(value)) {
                    layer.msg('邮箱格式不正确', {icon: 5});
                    return false;
                }
            }
        }
    });
});

 

7. layui时间控件在type: 'time' ,type: 'datetime'下无法在done回掉中用val('')来清空的问题

产生这一现象原因：由于源码中是先执行done再进行赋值的
解决方法：可以在done回调函数中使用延时器来使清空在赋值之后执行。

//时间控件初始化
layui.use('laydate', function() {
   var laydate = layui.laydate;
   //执行一个laydate实例
   var date1 = laydate.render({
      elem: '#starttime', //指定元素
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function(value, date, endDate) {                                                             
         if($("#endtime").val()!=""){                                                
            var date_ = date2.config.dateTime;
            date_.month++;
            if(new Date(date_.year,date_.month,date_.date,date_.hours,date_.minutes,date_.seconds).getTime()<new Date(date.year,date.month,date.date,date.hours,date.minutes,date.seconds).getTime()){
               layer.msg("起始日期不能超过结束日期");

               setTimeout(function () {
                   $("#starttime").val("");
               }, 5);
            }
         }
      },
      change: function (value) {
         date1.hint("请点击左下角选择时分秒"); //在控件上弹出提示值
      }
   });

   //执行一个laydate实例                                
   var date2 = laydate.render({                                        
      elem: '#endtime', //指定元素
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function(value, date, endDate) {
         if($("#starttime").val()!=""){
            var date_ = date1.config.dateTime;
            date_.month++;
            if(new Date(date_.year,date_.month,date_.date,date_.hours,date_.minutes,date_.seconds).getTime()>new Date(date.year,date.month,date.date,date.hours,date.minutes,date.seconds).getTime()){
               layer.msg("起始日期不能超过结束日期");
               setTimeout(function () {
                  $("#endtime").val("");
               }, 5);
            }
         }
      },
      change: function (value) {
         date2.hint("请点击左下角选择时分秒"); //在控件上弹出提示值
      }
   });
});

 

8.点击图片弹出大图

        function openIMG(src) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: "<img src='"+src+" ' style='max-width: 100%;'/>"
            });
        }