首页 > 编程语言 > vue实现表单验证功能
2022
07-11

vue实现表单验证功能

本篇主要讲述如何基于NUXT的validate方法实现表单的验证。

将验证方法封装后，使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。

首先看一下实现效果

一、新建一个validate.js文件：

该文档中放所需的一些验证规则，下面直接看代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/**
* Created by jiachenpan on 16/11/18.
**/
  
  
  
export function isvalidUsername (str) {
  const valid_map = ['admin', 'editor']
 return valid_map.indexOf(str.trim()) >= 0
  
}
  
// 非负数
export function noFuNumber (str) {
  const reg = /^\d+(\.{0,1}\d+){0,0}$/
 return reg.test(str)
  
}
  
// 手机号
export function isvalidMobile (str) {
  const reg = /^1(3|4|5|7|8)\d{9}$/
 return reg.test(str)
  
}
  
// 中文、英文、数字
export function regexn (str) {
  const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
 return reg.test(str)
  
}
  
/* 合法uri */
export function validateURL (textval) {
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.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
  
}
   
  
/* 小写字母 */
export function validateLowerCase (str) {
  const reg = /^[a-z]+$/
 return reg.test(str)
  
}
  
   
/* 大写字母 */
export function validateUpperCase (str) {
   const reg = /^[A-Z]+$/
 return reg.test(str)
  
}
  
  
/* 大小写字母 */
export function validateAlphabets (str) {
  const reg = /^[A-Za-z]+$/
 return reg.test(str)
  
}
  
  
/**
* validate email
* @param email
* @returns {boolean}
*/

二、新建filter_rules.js文件：

该文档放验证的回调函数和验证字段。

附代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import { isvalidMobile, regexn, noFuNumber } from '@/utils/validate'
export default {
install (Vue) {
  
/**
* 注意: 定义type 规则时 不用做非空验证
* 只需要传入 required:true 即可
* */
  
/* 验证非负数 */
  
const isnoFuNumber = (rule, value, callback) => {
 if (value != null && value !== '') {
 if (!noFuNumber(value)) {
  callback(new Error('请输入非负数的数字!'))
 } else {
  
callback()
  
}
  
} else {
callback()
  
}
  
}
  
/* 验证手机号 */
const isvalidateMobile = (rule, value, callback) => {
if (value != null && value !== '') {
if (!isvalidMobile(value)) {
callback(new Error('请输入正确的手机号码!'))
  
  } else {
callback()
}
  
   } else {
callback()
  
}
  
}
  
/* 含有非法字符(只能输入中文、英文、数字) */
const isvalidateRegexn = (rule, value, callback) => {
if (value != null && value !== '') {
if (!regexn(value)) {
callback(new Error('含有非法字符(只能输入中文、英文、数字)!'))
  
} else {
  
callback()
}
  
} else {
callback()
  
}
  
}
  
/* 请输入正整数 */
  
// const isvalidateInteger= (rule, value, callback) => {
// if (value != null && value != "") {
// if (!integer(value)) {
// callback(new Error('请输入正整数!'))
// } else {
// callback()
// }
// }
// else {
  
// callback();
// }
// }
  
  
  
/**
* 参数 item
* required true 必填项
* maxLength 字符串的最大长度
* min 和 max 必须同时给 min < max type=number
* type 手机号 mobile
* 邮箱 email
* 网址 url
* 各种自定义类型 定义在 src/utils/validate 中 持续添加中.......
* */
  
  
Vue.prototype.filter_rules = function (item) {
let rules = []
if (item.required) {
rules.push({ required: true, message: '该输入项为必填项!', trigger: 'blur' })
  
}
  
if (item.maxLength) {
rules.push({ min: 1, max: item.maxLength, message: '最多输入' + item.maxLength + '个字符!', trigger: 'blur' })
  
}
  
if (item.min && item.max) {
rules.push({ min: item.min, max: item.max, message: '字符长度在' + item.min + '至' + item.max + '之间!', trigger: 'blur' })
  
}
  
if (item.type) {
let type = item.type
switch (type) {
  
// case 'email':
// rules.push({ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' })
// break isnoFuNumber
  
case 'activeOrder':
rules.push({ validator: isnoFuNumber, trigger: 'blur' })
break
  
case 'mobile':
rules.push({ validator: isvalidateMobile, trigger: 'blur' })
break
 
case 'name':
rules.push({ validator: isvalidateRegexn, message: '请输入正确的用户姓名', trigger: 'blur' })
break
  
case 'password':
rules.push({ validator: isvalidateRegexn, message: '请输入密码', trigger: 'blur' })
break
  
case 'org_name':
rules.push({ validator: isvalidateRegexn, message: '机构名称不能包含特殊字符', trigger: 'blur' })
break
  
  
default:
  
rules.push({})
  
break
  
}
  
}
  
  
return rules
  
}
  
}
  
}

三、在页面中引入：

?
1
import Validate from '@/utils/filter_rules'

四、在页面中使用验证：

需将验证规则写在el-form-item标签内。

需要注意的是：

这三个地方的名称要书写一致。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。

编程技巧