layui的使用-表单模块

228 阅读1分钟

模块的引入

//单个模块的引入
layui.use('form',function(){
    var form=layui.form;//表单
})
//多个模块的引入
layui.use(['carousel','form','layer'],function(){
    var carousel=layui.carousel,//轮播
        form=layui.form,//表单
        layer=layui.layer;//弹出层
})

表单模块

自定义验证规则

只要在html结构里面对应的input标签加上 lay-verify="required|userName" 即可

lay-verify取值的范围

required(必填项)phone(手机号)email(邮箱)url(网址)number(数字)
date(日期)dentity(身份证)自定义值

    //自定义验证规则
   form.verify({
       userName: function (value) {
           if (value.length < 5) {
               return '账号至少得5个字符';
           }
       },
       pass: [/^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格'],
       passConfirm: function (value) {
           if (value != $('.register_main input[name=pwd]').val()) {
               return '两次密码不一致'
           }
       },
       tel: [/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/, '手机号码错误'],
       email: [/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, '邮箱格式不正确'],
       vercodes: function (value) {
           //获取验证码
           var ljyVerCode = $(".ljyVerCode").html();
           if (value != ljyVerCode) {
               return '验证码错误(区分大小写)';
           }
       },
       content: function (value) {
           layedit.sync(editIndex);
       }
   });
验证码规则
<div class="ljy_lofo_vercode ljyVerCode" onclick="ljyVerCode()"></div>//点击刷新
//封装一个生成随机数的函数
    //生成随机数
    function ljyVerCode(len) {
        len = len || 4;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; //默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
        var maxPos = $chars.length;
        var ljyCode = '';
        for (i = 0; i < len; i++) {
            ljyCode += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        $(".ljyVerCode").html(ljyCode);//插入到html标签中
    }
 //初始化调用这个函数
 $(function(){
     ljyVerCode()
 })
 //然后再自定义规则里面就可以
 vercodes: ...(见上文)

提交事件触发

<button lay-submit lay-filter="login">登录</button>   
//监听登录提交
    form.on('submit(login)', function (data) {
        $(this).parent().prev().find('button').css('display', 'none');
        $.ajax({
            type: "POST",
            url: "../server/login.php",
            data: `username=${data.field.userName}&password=${data.field.pwd}`,
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                if (res.meta.status == 0) {
                    layer.msg(res.meta.msg, {
                        icon: 1
                    });
                    setCookie('name', data.field.userName, 45, '/');
                    location.href = '../.././pc.html';
                } else {
                    layer.msg(res.meta.msg, {
                        icon: 2
                    });
                }
            }
        });
        return false;
    });

表单进度条效果

	<div class="toplogin" style="width: 0;">
		<div class="topColor" style="height: 6px; background: aqua"></div>
	</div>
//实现进度条效果
let logWidth = 0;
let reWidth = 0
$('.ljy_lofo_main input').focus(function () {
    $(this).change(function () {
        let inputLen = $('.ljy_lofo_main input').length
        let addNum = 1 / inputLen * 100
        logWidth += addNum
        $('.toplogin').css({
            width: `${logWidth}%`,
            transition: `0.8s`
        })
    })

})
$('.register_main input').focus(function () {
    $(this).change(() => {
        let inputLen = $('.register_main input').length
        let addNum =1 / inputLen * 100
        reWidth += addNum
        $('.toplogin').css({
            width: `${reWidth}%`,
            transition: `0.8s`
        })
    })

})