当前位置：网站首页>Form组件常用校验规则-2（持续更新中~）
Form组件常用校验规则-2（持续更新中~）
2022-07-07 21:43:00 【51CTO】
前言
上一篇简单介绍了Form表单校验的基础概念及基础代码框架；今天就开始总结常用的校验规则。一直在纠结应该怎么分类阐述比较好，想了一下觉得还是要先能看到效果，才好继续深入学习（反正我是这样的，有效才有动力）。
参考链接
https://element.eleme.io/#/zh-CN/component/form
https://github.com/yiminghe/async-validator
使用方式
常规
利用el-form的rules属性，对表单做统一处理
常规的对表单做统一处理的使用方式就是像 官网示例的那样，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可；
如：表单的rules属性绑定了data里的rules对象；
表单的form-item 活动名称 的 prop属性对应校验规则中的name规则；
<
el
-
form :
model
=
"ruleForm" :
rules
=
"rules"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
"活动名称"
prop
=
"name"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
"活动区域"
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
"请选择活动区域"
>
<
el
-
option
label
=
"区域一"
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
"区域二"
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
立即创建
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
重置
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
rules: {
name: [
{
required:
true,
message:
'请输入活动名称',
trigger:
'blur' },
{
min:
3,
max:
5,
message:
'长度在 3 到 5 个字符',
trigger:
'blur' }
],
region: [
{
required:
true,
message:
'请选择活动区域',
trigger:
'change' }
],
}
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 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.
利用el-form-item的rules属性，对表单项单独处理
有时候整个表单可能只需要一个必填项，或者需要对这个必填项做简单的特殊处理，这个时候可以选择这样做：
如：表单中只需要活动名称必填；只需要在所需的el-form-item上绑定rules属性即可；
<
el
-
form :
model
=
"ruleForm"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
"活动名称"
prop
=
"name" :
rules
=
"[{ required: true, message: '活动名称不能为空',trigger: 'blur'}]"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
"活动区域"
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
"请选择活动区域"
>
<
el
-
option
label
=
"区域一"
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
"区域二"
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
立即创建
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
重置
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 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.
利用三元表达式，动态处理表单项的必填或非必填
有时候某个表单项是否必填依赖于另一个表单项，或者另外某个字段值；
比如：当活动区域选择了上海，活动时间必填；
实现起来其实很简单，用一个三元表达式即可。
(开发经验少的我，见到这种处理方式觉得很棒！)
<
el
-
form :
model
=
"ruleForm"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
"活动名称"
prop
=
"name"
:
rules
=
"ruleForm.region == '0' ? [{ required: true, message: '活动名称不能为空',trigger: 'blur'}] : [{ required: false}]"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
"活动区域"
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
"请选择活动区域"
>
<
el
-
option
label
=
"区域一"
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
"区域二"
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
立即创建
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
重置
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 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.
自定义
validator绑定(rule, value, callback) => {} ，基础用法示例
这是官网给出的示例，展示了如何使用自定义验证规则来完成密码的二次验证。需要注意的是：自定义校验 callback 必须被调用。
<
el
-
form :
model
=
"ruleForm"
status
-
icon :
rules
=
"rules"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
"密码"
prop
=
"pass"
>
<
el
-
input
type
=
"password"
v
-
model
=
"ruleForm.pass"
autocomplete
=
"off"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
"确认密码"
prop
=
"checkPass"
>
<
el
-
input
type
=
"password"
v
-
model
=
"ruleForm.checkPass"
autocomplete
=
"off"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
"年龄"
prop
=
"age"
>
<
el
-
input
v
-
model.
number
=
"ruleForm.age"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
提交
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
重置
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
var
checkAge
= (
rule,
value,
callback)
=> {
if (
!
value) {
return
callback(
new
Error(
'年龄不能为空'));
}
setTimeout(()
=> {
if (
!
Number.
isInteger(
value)) {
callback(
new
Error(
'请输入数字值'));
}
else {
if (
value
<
18) {
callback(
new
Error(
'必须年满18岁'));
}
else {
callback();
}
}
},
1000);
};
var
validatePass
= (
rule,
value,
callback)
=> {
if (
value
===
'') {
callback(
new
Error(
'请输入密码'));
}
else {
if (
this.
ruleForm.
checkPass
!==
'') {
this.
$refs.
ruleForm.
validateField(
'checkPass');
}
callback();
}
};
var
validatePass2
= (
rule,
value,
callback)
=> {
if (
value
===
'') {
callback(
new
Error(
'请再次输入密码'));
}
else
if (
value
!==
this.
ruleForm.
pass) {
callback(
new
Error(
'两次输入密码不一致!'));
}
else {
callback();
}
};
return {
ruleForm: {
pass:
'',
checkPass:
'',
age:
''
},
rules: {
pass: [
{
validator:
validatePass,
trigger:
'blur' }
],
checkPass: [
{
validator:
validatePass2,
trigger:
'blur' }
],
age: [
{
validator:
checkAge,
trigger:
'blur' }
]
}
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 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.
validator绑定method,根据接口返回值进行校验并提示错误信息
需求就是，输入id之后调接口判断是否重复，如果重复给出提示；
rule: {
id: [{
required:
true,
message:
'请输入id',
trigger:
'blur' },
{
validator:
this.
check,
trigger:
'blur' }],
check(
rule,
value,
callback){
checkData(
this.
query).
then(
res
=>{
if(
res.
data.
data
>
0) {
this.
query.
id
=
''
callback(
new
Error(
'id重复，请重新输入！'));
}
else {
callback()
}
})
},
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
注意适时清空校验规则 resetFields()
在项目中经常会使用el-dialog里面使用el-form,伴随的业务经常是增加和修改；需要注意关闭dialog时，或者取消相应业务时，清空表单的校验规则！不然下次再打开dialog，还是会有一堆的红色校验信息的提示，体验感很不好。
边栏推荐
- Latest Android advanced interview questions summary, Android interview questions and answers
- 三元表达式、各生成式、匿名函数
- Build your own website (18)
- UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xf9 in position 56: illegal multibyte sequence
- How to close eslint related rules
- How to make agile digital transformation strategy for manufacturing enterprises
- Ternary expressions, generative expressions, anonymous functions
- C development - interprocess communication - named pipeline
- Cannot find module 'xxx' or its corresponding type declaration
- 新版代挂网站PHP源码+去除授权/支持燃鹅代抽
猜你喜欢
谈谈制造企业如何制定敏捷的数字化转型策略
用语雀写文章了，功能真心强大！
Matplotlib quick start
Pre sale 179000, hengchi 5 can fire? Product power online depends on how it is sold
海外代理推荐
Matplotlib drawing interface settings
Use blocconsumer to build responsive components and monitor status at the same time
How does win11 time display the day of the week? How does win11 display the day of the week today?
Build your own website (18)
Application practice | the efficiency of the data warehouse system has been comprehensively improved! Data warehouse construction based on Apache Doris in Tongcheng digital Department
随机推荐
Revit secondary development - operation family documents
Win11U盘不显示怎么办？Win11插U盘没反应的解决方法
Node:504 error reporting
Preparing for the interview and sharing experience
How to turn on win11 game mode? How to turn on game mode in win11
Record problems fgui tween animation will be inexplicably killed
Revit secondary development - get the thickness / length / height of the beam
【Azure微服务 Service Fabric 】因证书过期导致Service Fabric集群挂掉（升级无法完成，节点不可用）
Revit secondary development - wall opening
Paint basic graphics with custompaint
Record layoutrebuild Forcerebuildlayoutimmediate does not take effect
Remove the default background color of chrome input input box
IP网络主动测评系统——X-Vision
SAR image quality evaluation
[advanced MySQL] index details (I): index data page structure
What does it mean to prefix a string with F?
Time standard library
The function is really powerful!
Revit secondary development - intercept project error / warning pop-up
Typescript TS basic knowledge type declaration