index.vue
11.8 KB
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<template>
<div class="CommonForm-container app-container NCC-flex-main">
<div class="NCC-common-head">
<div></div>
<div class="NCC-common-head-right">
<el-button type="text" icon="el-icon-refresh" @click="init">重置</el-button>
<el-button type="primary" @click="dataFormSubmit()">提交验证</el-button>
</div>
</div>
<div class="dataForm">
<el-alert title="表单验证" type="warning" :closable="false" />
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" class="mt-10">
<el-form-item label="用户账号" prop="account">
<el-input v-model="dataForm.account" placeholder="用户账号" />
<span class="tip">必填,长度在6-20之间</span>
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="dataForm.password" placeholder="用户密码" type="password" maxlength="20" />
<span class="tip">必填，包含字母、数字和_-,长度在6-20之间</span>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="dataForm.password2" placeholder="确认密码" type="password"
maxlength="20" />
<span class="tip">必填，包含字母、数字和_-,长度在6-20之间</span>
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="dataForm.email" placeholder="电子邮箱" />
<span class="tip">请输入以@正确格式的电子邮件</span>
</el-form-item>
<el-form-item label="商品数量" prop="number">
<el-input v-model="dataForm.number" placeholder="商品数量" maxlength="6" />
<span class="tip">只能输入正整数</span>
</el-form-item>
<el-form-item label="信用卡号" prop="creditcard">
<el-input v-model="dataForm.creditcard" placeholder="信用卡号" maxlength="18" />
<span class="tip">请输入有效的信用卡号</span>
</el-form-item>
<el-form-item label="请求地址" prop="url">
<el-input v-model="dataForm.url" placeholder="请求地址" />
<span class="tip">以http:或https:开头的有效地址</span>
</el-form-item>
<el-form-item label="支付金额" prop="price">
<el-input v-model="dataForm.price" placeholder="支付金额" />
<span class="tip">只能输入大于或等于0的金额（包含小数）</span>
</el-form-item>
<el-form-item label="联系方式" prop="tel">
<el-input v-model="dataForm.tel" placeholder="联系方式" />
<span class="tip">包含手机号码和电话号码</span>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="手机号码" />
<span class="tip">只能输入以13,15,18开头的手机号码</span>
</el-form-item>
<el-form-item label="电话号码" prop="phone">
<el-input v-model="dataForm.phone" placeholder="电话号码" />
<span class="tip">请输入有效的电话号码</span>
</el-form-item>
<el-form-item label="有效年龄" prop="age">
<el-input v-model="dataForm.age" placeholder="有效年龄" />
<span class="tip">请输入0~100有效年龄</span>
</el-form-item>
<el-form-item label="邮政编码" prop="zipCode">
<el-input v-model="dataForm.zipCode" placeholder="邮政编码" />
<span class="tip">请输入有效的邮政编码</span>
</el-form-item>
<el-form-item label="身份证号" prop="cardId">
<el-input v-model="dataForm.cardId" placeholder="身份证号" />
<span class="tip">请输入有效的身份证号</span>
</el-form-item>
<el-form-item label="RGB" prop="RGB">
<el-input v-model="dataForm.RGB" placeholder="RGB" />
<span class="tip">请输入有效的十六进制颜色RGB(如：#ffffff)</span>
</el-form-item>
<el-form-item label="微信号" prop="wechat">
<el-input v-model="dataForm.wechat" placeholder="微信号" />
<span class="tip">请输入有效的微信号</span>
</el-form-item>
<el-form-item label="车牌号" prop="licensePlate">
<el-input v-model="dataForm.licensePlate" placeholder="车牌号" />
<span class="tip">请输入有效的车牌号(如：豫H81888)</span>
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input v-model="dataForm.qq" placeholder="QQ" />
<span class="tip">请输入有效的QQ号码</span>
</el-form-item>
<el-form-item label="IPv4" prop="ip">
<el-input v-model="dataForm.ip" placeholder="IPv4" />
<span class="tip">请输入有效的IPv4（255.255.255.255）</span>
</el-form-item>
<el-form-item label="英文" prop="english">
<el-input v-model="dataForm.english" placeholder="英文" />
<span class="tip">请输入有效的英文字母如：A~Z,a~z</span>
</el-form-item>
<el-form-item label="汉字" prop="chinese">
<el-input v-model="dataForm.chinese" placeholder="汉字" />
<span class="tip">请输入有效的汉字</span>
</el-form-item>
<el-form-item label="日期" prop="date">
<el-input v-model="dataForm.date" placeholder="日期" />
<span class="tip">请输入有效的日期（1900-01-01）</span>
</el-form-item>
<el-form-item label="浮点数小于0" prop="floatLtZero">
<el-input v-model="dataForm.floatLtZero" placeholder="浮点数小于0" />
<span class="tip">浮点数只能小于0</span>
</el-form-item>
<el-form-item label="浮点数大于0" prop="intGtZero">
<el-input v-model="dataForm.intGtZero" placeholder="浮点数大于0" />
<span class="tip">浮点数只能大于0</span>
</el-form-item>
<el-form-item label="浮点数不等于0" prop="intNEqZero">
<el-input v-model="dataForm.intNEqZero" placeholder="浮点数不等于0" />
<span class="tip">浮点数大于或小于0（不包含0）</span>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'extend-formDemo-verifyForm',
data() {
var validatePass = (rule, value, callback) => {
if (value !== this.dataForm.password) {
callback(new Error('两次密码输入不一致'));
}
};
return {
dataForm: {
account: '',
password: '',
password2: '',
email: '',
number: '',
creditcard: '',
url: '',
price: '',
tel: '',
mobile: '',
phone: '',
age: '',
zipCode: '',
cardId: '',
RGB: '',
wechat: '',
licensePlate: '',
qq: '',
ip: '',
english: '',
chinese: '',
date: '',
floatLtZero: '',
intGtZero: '',
intNEqZero: '',
},
dataRule: {
account: [
{ required: true, message: '用户账号不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在6-20之间', trigger: 'blur' }
],
password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
{ pattern: /^[0-9A-Za-z_-]{6,20}$/, message: '密码需包含字母、数字和_-,长度在6-20之间', trigger: 'blur' }
],
password2: [
{ required: true, message: '确认密码不能为空', trigger: 'blur' },
{ pattern: /^[0-9A-Za-z_-]{6,20}$/, message: '密码需包含字母、数字和_-,长度在6-20之间', trigger: 'blur' },
{ validator: validatePass }
],
email: [
{ pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '请输入以@正确格式的电子邮件', trigger: 'blur' }
],
number: [
{ pattern: /^\d+$/, message: '只能输入正整数', trigger: 'blur' }
],
creditcard: [
{ pattern: /^(62[0-9]{14,16})$/, message: '请输入有效的信用卡号', trigger: 'blur' }
],
url: [
{ pattern: /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/, message: '以http:或https:开头的有效地址', trigger: 'blur' }
],
price: [
{ pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/, message: '只能输入大于或等于0的金额（包含小数）', trigger: 'blur' }
],
tel: [
{ pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的联系方式', trigger: 'blur' }
],
mobile: [
{ pattern: /^1[358]\d{9}$/, message: '只能输入以13,15,18开头的手机号码', trigger: 'blur' }
],
phone: [
{ pattern: /^0\d{2,3}-?\d{7,8}$/, message: '请输入有效的电话号码', trigger: 'blur' }
],
age: [
{ pattern: /^([1-9]|[1-9]\d|100)$/, message: '请输入1~100有效年龄', trigger: 'blur' }
],
zipCode: [
{ pattern: /^[1-9]\d{5}$/, message: '请输入有效的邮政编码', trigger: 'blur' }
],
cardId: [
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/, message: '请输入有效的身份证号', trigger: 'blur' }
],
RGB: [
{ pattern: /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/, message: '请输入有效的十六进制颜色RGB(如：#ffffff)', trigger: 'blur' }
],
wechat: [
{ pattern: /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/, message: '请输入有效的微信号', trigger: 'blur' }
],
licensePlate: [
{ pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, message: '请输入有效的车牌号(如：豫H81888)', trigger: 'blur' }
],
qq: [
{ pattern: /^[1-9]\d{4,12}$/, message: '请输入有效的QQ号码', trigger: 'blur' }
],
ip: [
{ pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/, message: '请输入有效的IPv4（255.255.255.255）', trigger: 'blur' }
],
english: [
{ pattern: /^[A-Za-z]$/, message: '请输入有效的英文字母如：A~Z,a~z', trigger: 'blur' }
],
chinese: [
{ pattern: /[\u4E00-\u9FA5]/, message: '请输入有效的汉字', trigger: 'blur' }
],
date: [
{ pattern: /^\d{4}-\d{1,2}-\d{1,2}$/, message: '请输入有效的日期（1900-01-01）', trigger: 'blur' }
],
floatLtZero: [
{ pattern: /^-([1-9]\d*\.\d*|0\.\d*[1-9]\d)*$/, message: '浮点数只能小于0', trigger: 'blur' }
],
intGtZero: [
{ pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/, message: '浮点数只能大于0', trigger: 'blur' }
],
intNEqZero: [
{ pattern: /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+)$/, message: '浮点数大于或小于0（不包含0）', trigger: 'blur' }
]
},
}
},
methods: {
init() {
this.$refs['dataForm'].resetFields()
},
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$message({
message: '验证成功',
type: 'success',
duration: 1500,
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.CommonForm-container {
.NCC-common-head {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
.dataForm {
flex: 1;
overflow: auto;
.el-input {
width: 300px;
}
.tip {
margin-left: 10px;
color: darkgray;
}
}
}
</style>