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

一、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>

三、如何做到多条件有层次的校验？

把要校验的规则，用|分割开，就可以依次校验了。

如：lay-verify=“required|number”

先校验是否为空，如果不为空，再校验是否符合数字格式。