layui中使用lay-verify进行条件校验

云自由 2020-12-24

918

一、layui的校验很简单，主要有以下步骤：

1. 在form表单内加上class="layui-form"

2. 在提交按钮上加上lay-submit

3. 在想要校验的标签，加上lay-verify=””，在这个属性里，加上想要的值，就可以进行校验了。

lay-verify：是表单验证的关键字

有以下值供选择：

required (必填项)

phone（手机号）

email（邮箱）

url（网址）

number（数字）

date（日期）

identity(身份证)

二、除了上面的值之外，还可以自定义校验规则（略）

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


            //自定义验证规则
            form.verify({
                nikename: function (value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                },
                len: function (value) {
                    if (value.length < 5) {
                        return '至少得5个字符啊';
                    }
                },
                pass: [/(.+){6,12}$/, '密码必须6到12位'],
                repass: function (value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                },
                otherReq: function (value, item) {
                    var $ = layui.$;
                    var verifyName = $(item).attr('name')
                        , verifyType = $(item).attr('type')
                        , formElem = $(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                        , verifyElem = formElem.find('input[name=' + verifyName + ']')//获取需要校验的元素
                        , isTrue = verifyElem.is(':checked')//是否命中校验
                        , focusElem = verifyElem.next().find('i.layui-icon'); //焦点元素
                    if (!isTrue || !value) {
                        //定位焦点
                        focusElem.css(verifyType == 'radio' ? { "color": "#FF5722" } : { "border-color": "#FF5722" });
                        //对非输入框设置焦点
                        focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
                            focusElem.css(verifyType == 'radio' ? { "color": "" } : { "border-color": "" });
                        }).focus();
                        return '必填项不能为空';
                    }
                }
            });
        });
</script>
复制