FormValidation

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

组件脚本

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

脚本说明

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

示例

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