lay-verify 无效

lay-verify 无效

使用lay-verify有两个需要注意的地方:

• form标签需要添加 class="layui-form"
• 提交按钮需要添加 lay-submit=""

如：

<form action="#" method="post" class="layui-form"> <input id="login-username" type="text" name="username" placeholder="Username" lay-verify="required|username"> <input id="login-password" type="password" name="password" placeholder="Password" lay-verify="required|password"> <input class="layui-btn layui-btn-fluid layui-btn-normal " lay-submit="" type="button" value="Login" lay-filter="login-submit"> </form>

JS部分：

<script type="text/javascript">
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;
        var form = layui.form;
        form.verify({
            username: function (value, item) {
                //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^(.+){4,18}$").test(value)) {
                    return '用户名长度必须为4-18位'
                }
                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,18}$/,
                '密码必须6到12位，且不能出现空格'
            ],
            confirm_password: function (value) {
                if (!new RegExp("^[\\S]{6,18}$").test(value)) {
                    return '密码长度必须为6-18位'
                }
                if (value !== $('#login-password').val()) {
                    return '两次输入的密码不一致';
                }
            }
        });

         form.on('submit(login-submit)', function (data) {
            var login_username = $("#login-username");
            var login_password = $("#login-password");
            var username = login_username.val();
            var password = login_password.val();
            password = md5(password);

            $.ajax({
                url: "/XXX/login/",
                type: "POST",
                data: {
                    username: username,
                    password: password,
                    csrfmiddlewaretoken: '{{ csrf_token  }}'
                },
                async: false,
                success: function (data) {
                    var status = data.status;
                    if (status === 0) {
                        $("#myModal").modal('hide');
                        layer.msg("Login Success!", {offset: '200px'});
                        // todo something after login
                    } else if (status === 21) {
                        // user not exist
                        layer.msg(data.msg, {offset: '200px'});
                        login_username.val("");
                        login_password.val("");
                        login_username.focus();
                    } else if (status === 22) {
                        // wrong password
                        layer.msg(data.msg, {offset: '200px'});
                        login_password.val("");
                        login_password.focus();
                    } else {
                        layer.msg(data.msg, {offset: '200px'});
                    }
                },
                error: function () {
                    layer.msg("System Service Busy!", {offset: '200px'});
                }
            });
            return false;
        });
    });
</script>