JS通用校验工具

将以下form的校验内容存放到路径中

  1 // 是否包含<script>
  2 export function checkScript(rule, value, callback) {
  3   const reg = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
  4   setTimeout(() => {
  5     if (reg.test(value)) {
  6       callback(new Error(‘输入内容不能含js脚本!‘))
  7     } else {
  8       callback()
  9     }
 10   }, 500)
 11 }
 12 // 是否包含标签
 13 export function checkHtml(rule, value, callback) {
 14   const reg = /<(.*)\/>/;
 15   const regtwo = /<(.*)>.*<\/(.*)>/;
 16   setTimeout(() => {
 17     if (reg.test(value)) {
 18       callback(new Error(‘输入内容不能含标签!‘))
 19     } else if (regtwo.test(value)) {
 20       callback(new Error(‘输入内容不能含成对的标签!‘))
 21     } else {
 22       callback()
 23     }
 24   }, 500)
 25 }
 26 
 27 // 是否手机号码(不做非空判断)
 28 export function checkPhone(rule, value, callback) {
 29   setTimeout(() => {
 30     if (!/^1[3456789]\d{9}$/.test(value) && value != ‘‘ && value != undefined) {
 31       callback(new Error(‘请输入正确的手机号‘))
 32     } else {
 33       callback()
 34     }
 35   }, 500)
 36 }
 37 
 38 // 特殊字符校验
 39 export function specialCharacters(rule, value, callback) {
 40   var reg = new RegExp(‘[\\\\/:*?\"<>|]‘);
 41   if (reg.test(value)) {
 42     callback(new Error(‘名称不能含有特殊字符‘))
 43   } else {
 44     callback()
 45   }
 46 }
 47 
 48 // 纯数字校验
 49 export function validateNumber(rule, value, callback) {
 50   let numberReg = /^[0-9]+(.[0-9]{1,4})?$/
 51   if (!numberReg.test(value)) {
 52     callback(new Error(‘请输入小数点4位以内的正数‘))
 53   } else {
 54     callback()
 55   }
 56 }
 57 
 58 // 是否是固话
 59 export function validateTelphone(rule, value, callback) {
 60   const reg = /0\d{2,3}-\d{7,8}/;
 61   if (value == ‘‘ || value == undefined || value == null) {
 62     callback();
 63   } else {
 64     if ((!reg.test(value)) && value != ‘‘) {
 65       callback(new Error(‘请输入正确的固定电话)‘));
 66     } else {
 67       callback();
 68     }
 69   }
 70 }
 71 
 72 // 是否手机号码或者固话
 73 export function validatePhoneTwo(rule, value, callback) {
 74   const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
 75   if (value == ‘‘ || value == undefined || value == null) {
 76     callback();
 77   } else {
 78     if ((!reg.test(value)) && value != ‘‘) {
 79       callback(new Error(‘请输入正确的电话号码或者固话号码‘));
 80     } else {
 81       callback();
 82     }
 83   }
 84 }
 85 
 86 //是否合法IP地址
 87 export function validateIP(rule, value, callback) {
 88   if (value == ‘‘ || value == undefined || value == null) {
 89     callback();
 90   } else {
 91     const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
 92     if ((!reg.test(value)) && value != ‘‘) {
 93       callback(new Error(‘请输入正确的IP地址‘));
 94     } else {
 95       callback();
 96     }
 97   }
 98 }
 99 
100 // 是否身份证号码
101 export function validateIdNo(rule, value, callback) {
102   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
103   if (value == ‘‘ || value == undefined || value == null) {
104     return callback(new Error(‘身份证不能为空‘))
105   } else {
106     if ((!reg.test(value)) && value != ‘‘) {
107       callback(new Error(‘请输入正确的身份证号码‘));
108     } else {
109       callback();
110     }
111   }
112 }
113 
114 // 是否邮箱
115 export function validateEMail(rule, value, callback) {
116   const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
117   if (value == ‘‘ || value == undefined || value == null) {
118     callback();
119   } else {
120     if (!reg.test(value)) {
121       callback(new Error(‘请输入正确的邮箱‘));
122     } else {
123       callback();
124     }
125   }
126 }
127 
128 // 合法url
129 export function validateURL(url) {
130   const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?‘\\+&%$#=~_-]+))*$/;
131   return urlregex.test(url);
132 }
133 
134 // 验证内容是否包含英文数字以及下划线
135 export function isPassword(rule, value, callback) {
136   const reg = /^[_a-zA-Z0-9]+$/;
137   if (value == ‘‘ || value == undefined || value == null) {
138     callback();
139   } else {
140     if (!reg.test(value)) {
141       callback(new Error(‘仅由英文字母,数字以及下划线组成‘));
142     } else {
143       callback();
144     }
145   }
146 }
147 
148 // 自动检验数值的范围
149 export function checkMax20000(rule, value, callback) {
150   if (value == ‘‘ || value == undefined || value == null) {
151     callback();
152   } else if (!Number(value)) {
153     callback(new Error(‘请输入[1,20000]之间的数字‘));
154   } else if (value < 1 || value > 20000) {
155     callback(new Error(‘请输入[1,20000]之间的数字‘));
156   } else {
157     callback();
158   }
159 }
160 
161 // 验证数字输入框最大数值
162 export function checkMaxVal(rule, value, callback) {
163   if (value < 0 || value > 最大值) {
164     callback(new Error(‘请输入[0,最大值]之间的数字‘));
165   } else {
166     callback();
167   }
168 }
169 
170 // 验证是否1-99之间
171 export function isOneToNinetyNine(rule, value, callback) {
172   if (!value) {
173     return callback(new Error(‘输入不可以为空‘));
174   }
175   setTimeout(() => {
176     if (!Number(value)) {
177       callback(new Error(‘请输入正整数‘));
178     } else {
179       const re = /^[1-9][0-9]{0,1}$/;
180       const rsCheck = re.test(value);
181       if (!rsCheck) {
182         callback(new Error(‘请输入正整数,值为【1,99】‘));
183       } else {
184         callback();
185       }
186     }
187   }, 0);
188 }
189 
190 // 验证是否整数
191 export function isInteger(rule, value, callback) {
192   if (!value) {
193     return callback(new Error(‘输入不可以为空‘));
194   }
195   setTimeout(() => {
196     if (!Number(value)) {
197       callback(new Error(‘请输入正整数‘));
198     } else {
199       const re = /^[0-9]*[1-9][0-9]*$/;
200       const rsCheck = re.test(value);
201       if (!rsCheck) {
202         callback(new Error(‘请输入正整数‘));
203       } else {
204         callback();
205       }
206     }
207   }, 0);
208 }
209 
210 // 验证是否整数,非必填
211 export function isIntegerNotMust(rule, value, callback) {
212   if (!value) {
213     callback();
214   }
215   setTimeout(() => {
216     if (!Number(value)) {
217       callback(new Error(‘请输入正整数‘));
218     } else {
219       const re = /^[0-9]*[1-9][0-9]*$/;
220       const rsCheck = re.test(value);
221       if (!rsCheck) {
222         callback(new Error(‘请输入正整数‘));
223       } else {
224         callback();
225       }
226     }
227   }, 1000);
228 }
229 
230 // 验证是否是[0-1]的小数
231 export function isDecimal(rule, value, callback) {
232   if (!value) {
233     return callback(new Error(‘输入不可以为空‘));
234   }
235   setTimeout(() => {
236     if (!Number(value)) {
237       callback(new Error(‘请输入[0,1]之间的数字‘));
238     } else {
239       if (value < 0 || value > 1) {
240         callback(new Error(‘请输入[0,1]之间的数字‘));
241       } else {
242         callback();
243       }
244     }
245   }, 100);
246 }
247 
248 // 验证是否是[1-10]的小数,即不可以等于0
249 export function isBtnOneToTen(rule, value, callback) {
250   if (typeof value == ‘undefined‘) {
251     return callback(new Error(‘输入不可以为空‘));
252   }
253   setTimeout(() => {
254     if (!Number(value)) {
255       callback(new Error(‘请输入正整数,值为[1,10]‘));
256     } else {
257       if (!(value == ‘1‘ || value == ‘2‘ || value == ‘3‘ || value == ‘4‘ || value == ‘5‘ || value == ‘6‘ || value == ‘7‘ || value == ‘8‘ || value == ‘9‘ || value == ‘10‘)) {
258         callback(new Error(‘请输入正整数,值为[1,10]‘));
259       } else {
260         callback();
261       }
262     }
263   }, 100);
264 }
265 
266 // 验证是否是[1-100]的小数,即不可以等于0
267 export function isBtnOneToHundred(rule, value, callback) {
268   if (!value) {
269     return callback(new Error(‘输入不可以为空‘));
270   }
271   setTimeout(() => {
272     if (!Number(value)) {
273       callback(new Error(‘请输入整数,值为[1,100]‘));
274     } else {
275       if (value < 1 || value > 100) {
276         callback(new Error(‘请输入整数,值为[1,100]‘));
277       } else {
278         callback();
279       }
280     }
281   }, 100);
282 }
283 
284 // 验证是否是[0-100]的小数
285 export function isBtnZeroToHundred(rule, value, callback) {
286   if (!value) {
287     return callback(new Error(‘输入不可以为空‘));
288   }
289   setTimeout(() => {
290     if (!Number(value)) {
291       callback(new Error(‘请输入[1,100]之间的数字‘));
292     } else {
293       if (value < 0 || value > 100) {
294         callback(new Error(‘请输入[1,100]之间的数字‘));
295       } else {
296         callback();
297       }
298     }
299   }, 100);
300 }
301 
302 // 验证端口是否在[0,65535]之间
303 export function isPort(rule, value, callback) {
304   if (!value) {
305     return callback(new Error(‘输入不可以为空‘));
306   }
307   setTimeout(() => {
308     if (value == ‘‘ || typeof (value) == undefined) {
309       callback(new Error(‘请输入端口值‘));
310     } else {
311       const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
312       const rsCheck = re.test(value);
313       if (!rsCheck) {
314         callback(new Error(‘请输入在[0-65535]之间的端口值‘));
315       } else {
316         callback();
317       }
318     }
319   }, 100);
320 }
321 
322 // 验证端口是否在[0,65535]之间,非必填,isMust表示是否必填
323 export function isCheckPort(rule, value, callback) {
324   if (!value) {
325     callback();
326   }
327   setTimeout(() => {
328     if (value == ‘‘ || typeof (value) == undefined) {
329       //callback(new Error(‘请输入端口值‘));
330     } else {
331       const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
332       const rsCheck = re.test(value);
333       if (!rsCheck) {
334         callback(new Error(‘请输入在[0-65535]之间的端口值‘));
335       } else {
336         callback();
337       }
338     }
339   }, 100);
340 }
341 
342 // 小写字母
343 export function validateLowerCase(val) {
344   const reg = /^[a-z]+$/;
345   return reg.test(val);
346 }
347 
348 // 两位小数验证
349 const validateValidity = (rule, value, callback) => {
350   if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
351     callback(new Error(‘最多两位小数!!!‘));
352   } else {
353     callback();
354   }
355 };
356 
357 // 是否大写字母
358 export function validateUpperCase(val) {
359   const reg = /^[A-Z]+$/;
360   return reg.test(val);
361 }
362 
363 // 是否大小写字母
364 export function validatAlphabets(val) {
365   const reg = /^[A-Za-z]+$/;
366   return reg.test(val);
367 }
368 
369 // 密码校验
370 export const validatePsdReg = (rule, value, callback) => {
371   if (!value) {
372     return callback(new Error(‘请输入密码‘))
373   }
374   if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
375     callback(new Error(‘请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种‘))
376   } else {
377     callback()
378   }
379 }
380 
381 // 中文校验
382 export const validateContacts = (rule, value, callback) => {
383   if (!value) {
384     return callback(new Error(‘请输入中文‘))
385   }
386   if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
387     callback(new Error(‘不可输入特殊字符‘))
388   } else {
389     callback()
390   }
391 }
392 
393 // 账号校验
394 export const validateCode = (rule, value, callback) => {
395   if (!value) {
396     return callback(new Error(‘请输入账号‘))
397   }
398   if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
399     callback(new Error(‘账号必须为6-20位字母和数字组合‘))
400   } else {
401     callback()
402   }
403 }
404 
405 // 最多一位小数
406 const onePoint = (rule, value, callback) => {
407   if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
408     callback(new Error(‘最多一位小数!!!‘));
409   } else {
410     callback();
411   }
412 };

在要校验的js文件中引用。

import { checkScript, checkHtml } from ‘@/common/validate‘

在rule中添加已经引用的规则

rules: {
        name: [
          { required: true, message: ‘计划名称不能为空‘, trigger: ‘blur‘ },
          { validator: checkScript, trigger: ‘blur‘ },
          { validator: checkHtml, trigger: ‘blur‘ },
          { max: 20, message: ‘长度在20个字符以内‘, trigger: ‘blur‘ }
        ]
      }

 

JS通用校验工具

上一篇:php 图片操作类 Intervention Image


下一篇:HTML杂记