將以下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' }
]
}