layui 上传图片校验

    layui地址[添加链接描述](https://www.layui.com/doc/modules/upload.html)![在这里插入图片描述](https://img-blog.csdnimg.cn/2020101911421089.png#pic_center)

在这里插入图片描述

    var uploadInst = upload.render({
        elem: '#test2'
        ,accept: 'images'
        ,multiple:false
        ,auto: false
        , url: '{:url("upload/uploadImg")}' //改成您自己的上传接口
        ,auto: false //
        ,choose: function(obj){  //上传前选择回调方法
            var flag = true;
            // https://www.layui.com/doc/modules/upload.html
            obj.preview(function(index, file, result){
                // console.log(file);            //file表示文件信息,result表示文件src地址
                var img = new Image();
                img.src = result;
                img.onload = function () { //初始化夹在完成后获取上传图片宽高,判断限制上传图片的大小。
                    console.log(img.width+'宽度');
                    console.log(img.height+'高度');
                    if(img.width <= 1000){
                        $('#demo2').attr('src', result);
                        obj.upload(index, file); //满足条件调用上传方法
                    }else{
                        flag = false;
                        // layer.msg("您上传的图片最短边至少50px,最长边最大4096px!");
                        layer.alert("上传海报图片宽度不可大于1000px", { icon: 5, title: "提示", offset: "auto", skin: 'layui-layer-molv' });
                        return false;
                    }
                }
                return flag;
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code > 0) {
                return layer.msg('上传失败');
            }
            //上传成功
            $('input[name="thumb"]').val(res.data)
        }
        , error: function () {
            //演示失败状态,并实现重传
            var demoText = $('#demoText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload1').on('click', function () {
                uploadInst.upload();
            });
        }
    });
好的,关于 layui 表单校验,你可以参考以下代码: ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //JavaScript代码区域 layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> ``` 其中,`lay-verify` 属性用于指定校验规则,`required` 表示必填项。在 JavaScript 中,我们可以通过 `form.verify()` 方法来自定义校验规则。例如: ```javascript //自定义校验规则 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 '用户名不能全为数字'; } }, password: [/^[\S]{6,12}$/,'密码必须6到12位,且不能出现空格'] }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值