FormValidation

表单验证，只需配置验证项以及相关提示

组件脚本

  1. /**
  2.  * 表单验证
  3.  * @author echo.
  4.  * @version 1.4.0
  5.  **/
  7. const form = {
  8.     //当出现错误时返回错误消息，否则返回空即为验证通过
  9.     /*
  10.      formData:Object 表单对象。{key:value,key:value},key==rules.name
  11.      rules: Array [{name:name,rule:[],msg:[]},{name:name,rule:[],msg:[]}]
  12.             name:name 属性=> 元素的名称
  13.             rule:字符串数组 ["required","isMobile","isEmail","isCarNo","isIdCard","isAmount","isNum","isChinese","isEnglish",isEnAndNo","isSpecial","isEmoji",""isDate","isUrl","isSame:key","range:[1,9]","minLength:9","maxLength:Number"]
  14.             msg:数组 []。 与数组 rule 长度相同,对应的错误提示信息
  15.     */
  16.     validation: function(formData, rules) {
  17.         for (let item of rules) {
  18.             let key = item.name;
  19.             let rule = item.rule;
  20.             let msgArr = item.msg;
  21.             if (!key || !rule || rule.length === 0 || !msgArr || msgArr.length === 0) {
  22.                 continue;
  23.             }
  24.             for (let i = 0, length = rule.length; i < length; i++) {
  25.                 let ruleItem = rule[i];
  26.                 let msg = msgArr[i];
  27.                 if (!ruleItem || !msg) {
  28.                     continue;
  29.                 }
  30.                 //数据处理
  31.                 let value = null;
  32.                 if (~ruleItem.indexOf(":")) {
  33.                     let temp = ruleItem.split(":");
  34.                     ruleItem = temp[0];
  35.                     value = temp[1];
  36.                 }
  37.                 let isError = false;
  38.                 switch (ruleItem) {
  39.                     case "required":
  40.                         isError = form._isNullOrEmpty(formData[key]);
  41.                         break;
  42.                     case "isMobile":
  43.                         isError = !form._isMobile(formData[key]);
  44.                         break;
  45.                     case "isEmail":
  46.                         isError = !form._isEmail(formData[key]);
  47.                         break;
  48.                     case "isCarNo":
  49.                         isError = !form._isCarNo(formData[key]);
  50.                         break;
  51.                     case "isIdCard":
  52.                         isError = !form._isIdCard(formData[key]);
  53.                         break;
  54.                     case "isAmount":
  55.                         isError = !form._isAmount(formData[key]);
  56.                         break;
  57.                     case "isNum":
  58.                         isError = !form._isNum(formData[key]);
  59.                         break;
  60.                     case "isChinese":
  61.                         isError = !form._isChinese(formData[key]);
  62.                         break;
  63.                     case "isEnglish":
  64.                         isError = !form._isEnglish(formData[key]);
  65.                         break;
  66.                     case "isEnAndNo":
  67.                         isError = !form._isEnAndNo(formData[key]);
  68.                         break;
  69.                     case "isEnOrNo":
  70.                         isError = !form._isEnOrNo(formData[key]);
  71.                         break;
  72.                     case "isSpecial":
  73.                         isError = form._isSpecial(formData[key]);
  74.                         break;
  75.                     case "isEmoji":
  76.                         isError = form._isEmoji(formData[key]);
  77.                         break;
  78.                     case "isDate":
  79.                         isError = !form._isDate(formData[key]);
  80.                         break;
  81.                     case "isUrl":
  82.                         isError = !form._isUrl(formData[key]);
  83.                         break;
  84.                     case "isSame":
  85.                         isError = !form._isSame(formData[key], formData[value]);
  86.                         break;
  87.                     case "range":
  88.                         let range = null;
  89.                         try {
  90.                             range = JSON.parse(value);
  91.                             if (range.length <= 1) {
  92.                                 throw new Error("range值传入有误！")
  93.                             }
  94.                         } catch (e) {
  95.                             return "range值传入有误！"
  96.                         }
  97.                         isError = !form._isRange(formData[key], range[0], range[1])
  98.                         break;
  99.                     case "minLength":
  100.                         isError = !form._minLength(formData[key], value)
  101.                         break;
  102.                     case "maxLength":
  103.                         isError = !form._maxLength(formData[key], value)
  104.                         break;
  105.                     default:
  106.                         break;
  107.                 }
  108.                 if (isError) {
  109.                     return msg;
  110.                 }
  111.             }
  112.         }
  113.         return "";
  114.     },
  115.     _isNullOrEmpty: function(value) {
  116.         return (value === null || value === '' || value === undefined) ? true : false;
  117.     },
  118.     _isMobile: function(value) {
  119.         return /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{5}(\d{3}|\*{3})$/.test(value);
  120.     },
  121.     _isEmail: function(value) {
  122.         return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
  123.     },
  124.     _isCarNo: function(value) {
  125.         // 新能源车牌
  126.         const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
  127.         // 旧车牌
  128.         const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
  129.         if (value.length === 7) {
  130.             return creg.test(value);
  131.         } else if (value.length === 8) {
  132.             return xreg.test(value);
  133.         } else {
  134.             return false;
  135.         }
  136.     },
  137.     _isIdCard: function(value) {
  138.         let idCard = value;
  139.         if (idCard.length == 15) {
  140.             return this.__isValidityBrithBy15IdCard;
  141.         } else if (idCard.length == 18) {
  142.             let arrIdCard = idCard.split("");
  143.             if (this.__isValidityBrithBy18IdCard(idCard) && this.__isTrueValidateCodeBy18IdCard(arrIdCard)) {
  144.                 return true;
  145.             } else {
  146.                 return false;
  147.             }
  148.         } else {
  149.             return false;
  150.         }
  151.     },
  152.     __isTrueValidateCodeBy18IdCard: function(arrIdCard) {
  153.         let sum = 0;
  154.         let Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
  155.         let ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
  156.         if (arrIdCard[17].toLowerCase() == 'x') {
  157.             arrIdCard[17] = 10;
  158.         }
  159.         for (let i = 0; i < 17; i++) {
  160.             sum += Wi[i] * arrIdCard[i];
  161.         }
  162.         let valCodePosition = sum % 11;
  163.         if (arrIdCard[17] == ValideCode[valCodePosition]) {
  164.             return true;
  165.         } else {
  166.             return false;
  167.         }
  168.     },
  169.     __isValidityBrithBy18IdCard: function(idCard18) {
  170.         let year = idCard18.substring(6, 10);
  171.         let month = idCard18.substring(10, 12);
  172.         let day = idCard18.substring(12, 14);
  173.         let temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
  174.         if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() !=
  175.             parseFloat(day)) {
  176.             return false;
  177.         } else {
  178.             return true;
  179.         }
  180.     },
  181.     __isValidityBrithBy15IdCard: function(idCard15) {
  182.         let year = idCard15.substring(6, 8);
  183.         let month = idCard15.substring(8, 10);
  184.         let day = idCard15.substring(10, 12);
  185.         let temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
  187.         if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() !=
  188.             parseFloat(day)) {
  189.             return false;
  190.         } else {
  191.             return true;
  192.         }
  193.     },
  194.     _isAmount: function(value) {
  195.         //金额，只允许保留两位小数
  196.         return /^([0-9]*[.]?[0-9])[0-9]{0,1}$/.test(value);
  197.     },
  198.     _isNum: function(value) {
  199.         //只能为数字
  200.         return /^[0-9]+$/.test(value);
  201.     },
  202.     _isChinese: function(value) {
  203.         let reg = /.*[\u4e00-\u9fa5]+.*$/;
  204.         return value !== "" && reg.test(value) && !form._isSpecial(value) && !form._isEmoji(value)
  205.     },
  206.     _isEnglish: function(value) {
  207.         return /^[a-zA-Z]*$/.test(value)
  208.     },
  209.     _isEnAndNo: function(value) {
  210.         //8~20位数字和字母组合
  211.         return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(value);
  212.     },
  213.     _isEnOrNo: function(value) {
  214.         //英文或者数字
  215.         let reg = /.*[\u4e00-\u9fa5]+.*$/;
  216.         let result = true;
  217.         if (reg.test(value) || form._isSpecial(value) || form._isEmoji(value)) {
  218.             result = false
  219.         }
  220.         return result
  221.     },
  222.     _isSpecial: function(value) {
  223.         //是否包含特殊字符
  224.         let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
  225.             regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
  226.         if (regEn.test(value) || regCn.test(value)) {
  227.             return true;
  228.         }
  229.         return false;
  230.     },
  231.     _isEmoji: function(value) {
  232.         //是否包含表情
  233.         return /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(value);
  234.     },
  235.     _isDate: function(value) {
  236.         //2019-10-12
  237.         const reg =
  238.             /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
  239.         return reg.test(value);
  240.     },
  241.     _isUrl: function(value) {
  242.         return /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/.test(value);
  243.     },
  244.     _isSame: function(value1, value2) {
  245.         return value1 === value2
  246.     },
  247.     _isRange: function(value, range1, range2) {
  248.         if ((!range1 && range1 != 0) && (!range2 && range2 != 0)) {
  249.             return true;
  250.         } else if (!range1 && range1 != 0) {
  251.             return value <= range2
  252.         } else if (!range2 && range2 != 0) {
  253.             return value >= range1
  254.         } else {
  255.             return value >= range1 && value <= range2
  256.         }
  257.     },
  258.     _minLength: function(value, min) {
  259.         return value.length >= Number(min)
  260.     },
  261.     _maxLength: function(value, max) {
  262.         return value.length <= Number(max)
  263.     }
  264. };
  265. module.exports = {
  266.     validation: form.validation
  267. };

脚本说明

  2.  methods:
  3.    "validation":表单验证唯一方法，传入相应参数
  4.         "validation"参数："formData":Object 表单对象。参数格式：{key:value,key:value}, key===rules.name
  5.         "validation"参数："rules": Array 参数格式：[{name:name,rule:[],msg:[]},{name:name,rule:[],msg:[]}]
  6.                           rules属性描述
  7.                             "name":name 属性=> 元素的名称
  8.                             "rule":字符串数组
  9.                              [
  10.                                 "required", //=>必填
  11.                                  "isMobile",//=>是否为手机号
  12.                                  "isEmail",//=>是否为邮箱
  13.                                  "isCarNo",//=>是否为车牌号
  14.                                  "isIdCard",//=>是否为身份证号
  15.                                  "isAmount",//=>是否为金额，允许保留两位小数
  16.                                  "isNum",//=>是否为数字
  17.                                  "isChinese",//=>是否为中文
  18.                                  "isEnglish",//=>是否为英文
  19.                                  "isEnAndNo",//=>是否为英文和数字组合 8~20位
  20.                                  "isSpecial",//=>是否有特殊字符
  21.                                  "isEmoji",//=>是否有表情符号
  22.                                  "isDate",//=>是否为日期
  23.                                  "isUrl",//=>是否为地址
  24.                                  "isSame:key",//=>一般校验两次输入的值是否相同
  25.                                  "range:[1,9]",//=>数值范围
  26.                                  "minLength:9",//=>最小长度
  27.                                  "maxLength:Number"//=>最大长度
  28.                              ]
  29.                             "msg":数组 []。 与数组 rule 长度相同,对应的错误提示信息

示例

  1. ... 此处省略n行,下载源码查看