layui表单验证抽离成单独模块手动调用

模块名：validateForm

验证添加方法和原来一样（lay-verify=''），可以多个表单一起验证，任何任何一个验证不通过就会返回。使用：

var boolResult = validateForm.validate("formId1","formId2",....)

模块定义如下：

  1 /**
  2   扩展一个 表单手动验证 模块
  3 **/
  4
  5 layui.define(['layer','form'],function (exports) { //提示：模块也可以依赖其它模块，如：layui.define('mod1', callback);
  6     var layer = layui.layer;
  7     var form = layui.form;
  8     var obj = {
  9         hello: function (str) {
 10             alert('Hello ' + (str || 'validateForm'));
 11         },
 12         //传入多个form的id。比如：（'id1'，'id2','id3'）
 13         validate : function () {
 14             var device = layui.device();
 15             for (var i = 0; i < arguments.length; i++) {
 16                 var stop = null //验证不通过状态
 17                     , verify = form.config.verify //验证规则
 18                     , DANGER = 'layui-form-danger' //警示样式
 19                     , field = {}  //字段集合
 20                     , formElem = $(`#${arguments[i]}`) //获取当前所在的 form 元素，如果存在的话
 21                     , verifyElem = formElem.find('*[lay-verify]') //获取需要校验的元素
 22                 var verifyElem = $(`#${arguments[i]}`).find('*[lay-verify]');
 23                 //开始校验
 24                 layui.each(verifyElem, function (_, item) {
 25                     var othis = $(this)
 26                         , vers = othis.attr('lay-verify').split('|')
 27                         , verType = othis.attr('lay-verType') //提示方式
 28                         , value = othis.val();
 29
 30                     othis.removeClass(DANGER); //移除警示样式
 31
 32                     //遍历元素绑定的验证规则
 33                     layui.each(vers, function (_, thisVer) {
 34                         var isTrue //是否命中校验
 35                             , errorText = '' //错误提示文本
 36                             , isFn = typeof verify[thisVer] === 'function';
 37
 38                         //匹配验证规则
 39                         if (verify[thisVer]) {
 40                             var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value)
 41                                 //是否属于美化替换后的表单元素
 42                                 , isForm2Elem = item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type);
 43
 44                             errorText = errorText || verify[thisVer][1];
 45
 46                             if (thisVer === 'required') {
 47                                 errorText = othis.attr('lay-reqText') || errorText;
 48                             }
 49
 50                             //如果是必填项或者非空命中校验，则阻止提交，弹出提示
 51                             if (isTrue) {
 52                                 //提示层风格
 53                                 if (verType === 'tips') {
 54                                     layer.tips(errorText, function () {
 55                                         if (typeof othis.attr('lay-ignore') !== 'string') {
 56                                             if (isForm2Elem) {
 57                                                 return othis.next();
 58                                             }
 59                                         }
 60                                         return othis;
 61                                     }(), { tips: 1 });
 62                                 } else if (verType === 'alert') {
 63                                     layer.alert(errorText, { title: '提示', shadeClose: true });
 64                                 }
 65                                 //如果返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示
 66                                 else if (/\bstring|number\b/.test(typeof errorText)) {
 67                                     layer.msg(errorText, { icon: 5, shift: 6 });
 68                                 }
 69
 70                                 //非移动设备自动定位焦点
 71                                 if (!device.mobile) {
 72                                     setTimeout(function () {
 73                                         (isForm2Elem ? othis.next().find('input') : item).focus();
 74                                     }, 7);
 75                                 } else { //移动设备定位
 76                                     $dom.scrollTop(function () {
 77                                         try {
 78                                             return (isForm2Elem ? othis.next() : othis).offset().top - 15
 79                                         } catch (e) {
 80                                             return 0;
 81                                         }
 82                                     }());
 83                                 }
 84
 85                                 othis.addClass(DANGER);
 86                                 return stop = true;
 87                             }
 88                         }
 89                     });
 90                     if (stop) return stop;
 91                 });
 92
 93                 if (stop) return false;
 94             }
 95         }
 96     };
 97
 98     //输出 validateForm 接口
 99     exports('validateForm', obj);
100 });