elementui表单校验规则不起作用,elementui 表单验证
Element-ui表单验证规则允许错误提示直接显示在表单项下，而不显示弹出框。感兴趣的朋友可以参考一下。
:
目录
1.介绍
2.规则验证的进入模式
2.1、示例代码
2.2.表单项目
2.3.物品道具
2.4.规则项目
2.5.规则项目
2.6、使用规则
2.7、规则检查的核心
3.规则验证的高级模式
3.1、嵌套对象属性名
3.2.用户定义的验证程序
3.3.类型类型
3.3、数据转换变换
3.4.数值范围
3.5.枚举值
3.6.正常航线
3.7.长度镜头
3.8.空白
3.9、i18n
4.规则检查的高级模式
4.1.异步验证器
4.2.深层规则
4.3.动态规则集
4.3.1.切换验证规则集。
4.3.2.动态构建验证规则集。
4.4、动态表字段验证
4.5.多领域联合验证
5.参考文章
1、前言
Element-ui表单验证规则使得错误提示直接显示在form-item下，没有弹出框，所以还是很好用的。
在我检查了登录页面的表单后，我一度认为我已经知道了表单的检查规则。然而，当我深入使用表单验证规则时，我遇到了以下问题：
如何判断属性值是否在某个范围内，并且这个范围可以任意指定？
如何确定属性值是否为某个值？
多属性联合验证。当前属性的验证规则取决于另一个属性的值。如何验证？例如，在注册页面上，ID类型包括电子邮件地址、手机号码和ID号。如果选择不同的类型，IDValue属性的校验规则是不同的。怎么处理他们？
在两种模式下，如果输入同一个表单组件，有些字段可能不使用校验规则，即规则的对象会有所不同。这种情况怎么处理？
以上问题让我觉得自己都快白了。于是我被迫从头开始研究验证规则，查阅相关文献。
本文分享表单验证规则的经验。
2、规则校验的入门模式
2.1、示例代码
作为规则验证的介绍，以登录页面为例。代码如下：
模板
div class=登录容器
El-form ref= form :model= form :rules= rules label-width= 80px class= log in-form
H2 class=login-titleXX管理系统登录/h2
El-form-item标签=用户名：属性=用户名
el输入v-model=form.username/el输入
/El-表单-项目
El-form-item label= secret code: prop= password
El-输入v-model= form . password type= password /El-input
/El-表单-项目
El-form-item label=验证码： prop=verifyCode
El-input v-model= form . verify code /El-input
div class= divVerifyCodeImg @ click= getVerifyCode(true)
img id= verifyCodeImg style= height:40px；宽度：100px光标：指针；Alt=单击替换 title=单击替换/
/div
/El-表单-项目
El-表单-项目
El-button type= primary id= log in style= width:160 px @ click= submit form( form ) log in/El-button
/El-表单-项目
/el格式
/div
/模板
脚本
从“vuex”导入{ mapMutations }
导出默认值{
data() {
返回{
表单：{
用户名： ，
密码： ，
验证代码：“”，
},
规则：{
用户名：[
{必填：true，消息：“用户名不能为空”，触发器：“模糊”}，
],
密码：[
{必填：true，消息：密码不能为空，触发器：模糊 }，
{最短：6，最长：30，消息：“密码6-30位”，触发器：“模糊”}
],
验证代码：[
{必填：真，消息：验证码不能为空，触发器：模糊 }，
]
}
};
},
方法：{
//提交登录
submitForm(formName) {
let _ this=this
//执行验证
这个。$ refs[表单名]。验证(有效={
//验证通过为真，一次失败为假。
如果(有效){
//通过验证
//登录处理
//.
}否则{
//验证失败
Console.log(验证失败)；
返回false
}
});
},
}
}
/脚本
2.2、form项
表单项，指示检查规则的使用：
El-form ref= form :model= form :rules= rules label-width= 80px class= log in-form
:rules=rules 表示验证规则使用rules对象。您也可以使用其他名称，例如rules1。
2.3、prop项
属性项，指示哪些字段可以使用检查规则：
El-form-item标签=用户名：属性=用户名
el输入v-model=form.username/el输入
/El-表单-项目
如果由属性项指定的属性值，如username，在规则中也有相应的项，则意味着属性值被规则检查。此属性必须是由表单的模型属性绑定的数据对象的属性，在本例中，表单是在data:
表单：{
用户名： ，
密码： ，
验证代码：“”，
},
2.4、rules项
规则项，即校验规则集，在数据中定义，其名称必须与表单的：Rules属性所绑定的rules对象的名称一致。
规则：{
用户名：[
{必填：true，消息：“用户名不能为空”，触发器：“模糊”}，
],
密码：[
{必填：true，消息：密码不能为空，触发器：模糊 }，
{最短：6，最长：30，消息：“密码6-30位”，触发器：“模糊”}
],
验证代码：[
{必填：真，消息：验证码不能为空，触发器：模糊 }，
]
}
这是一个对象，每个元素的类型是：{属性名：[规则]}，属性名是prop的属性值。【规则】是一个规则数组，规则数组的每一项都是该属性的检查规则。
2.5、rule项
规则项，即规则数组的元素，是本文的重点。这里，先分析一下上述规则的要素：
必选：指示是否必须有值，值为true/false。如果为真，表示必须有值；如果没有值，验证失败；如果为false，则不允许有值，但如果有值，则不会影响其他规则的使用。
消息：提示消息，验证失败时会给出提示。
Trigger:触发模式，值为模糊/变化，蓝色表示失焦，一般用于输入组件；Change是一个值的变化，通常用在选择框中。
Min:字符串的最小长度。
Max:字符串的最大长度。
有了这些解释，就不难理解上述规则定义的每个属性的验证规则了。
2.6、使用规则
这个。$refs[form]。验证(有效={
//验证通过为真，一次失败为假。
如果(有效){
//通过验证
}否则{
//验证失败
}
});
这个validate方法要求在发布之前通过所有的验证规则。其中$ refs [form]指向表单的ref属性的值。
2.7、规则校验的核心
规则验证的核心是async-validator插件，https://github.com/yiminghe/async-validator,官网。
Element-UI使用插件并封装它。https://element.eleme.cn/#/zh-CN/component/form,官方网站。
因此，来自双方的信息将是有益的。
3、规则校验的进阶模式
3.1、嵌套对象属性名
有时候，道具并不是一个简单的属性，而是包裹在其他物体下的属性。比如：
El-form-item label=条目名称： prop=formData.loginName
El-input v-model= form . formdata . loginname :disabled= form . formdata . userid！=0 /El-输入
/El-表单-项目
表单的模型所绑定的表单对象是：
表单：{
//表单数据字段，为方便提交后端，建议与UserInfo字段同名。
表单数据：{
用户Id : 0，
登录名： ，
密码： ，
//.
},
//用户类型选择框的当前显示值
用户类型标签: ，
//.
},
此时，规则的元素定义不能采用以下形式：
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
],
这样编译就会报错！
应使用以下表格：
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
],
也就是用单引号或双引号把它括起来，变成一个字符串。
3.2、自定义校验器validator
网上有很多关于自定义checker验证器的相关资料，比如常规检查常用的验证器。
规则定义方法：
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
{验证程序：loginNameValidator，触发器： blur}
],
意味着“formData.loginName”属性使用loginNameValidator的验证器。考虑到代码的重用，自定义检查器一般是js文件，方便其他页面或项目使用。
在/src/common/目录中，使用以下代码创建validator.js文件：
/*登录名验证*/
导出函数loginNameValidator(规则，值，回调){
常量=/^[a-zA-Z][\w-.@]*$/;
if(value== value==undefined value==null){
回调()；
}否则{
如果(！注册测试(值)){
回调(新错误(要求是：英文字母开头，后面是字母数字字符和_-。@ symbol ))；
}否则{
回调()；
}
}
}
在vue文件中导入validator.js文件：
从“@/common/validator.js”导入{loginNameValidator}
如果需要导入多个外部验证器，请在{}中包含多个外部验证器，如{loginname validator，password validator}。
这里有个小坑，只是提一下。
根据目录结构，我首先使用下面的语句：
从导入{loginNameValidator}./././common/validator.js
结果，出现了一个编译错误，说文件././.找不到“/common/validator.js”，所以尝试了各种路径表示方法都失败了。最后我用@代替，因为alias配置在/bulid/webpack.base.conf.js，表示@表示src目录。
以下列形式返回到自定义验证程序：
函数ValidatorFuncName(规则，值，回调)
名称，随意指定。
事实上，它的完整形式是：
函数ValidatorFuncName(规则、值、回调、源、选项)
参数具有以下含义：
规则：指规则的对象。您可以在方法代码中添加第一句话：
console.log(规则)；
您可以打印出规则参数，它是该规则的对象数据。
Value:属性的值，即要验证的值。
回调：指向验证结束的回调函数。如果验证通过，调用callback()。如果失败，通常使用以下形式：
回调(新错误(特定提示信息))；
或者用参数提示：
返回回调(新错误(` ${rule.field}必须是小写字母数字字符`)；
请注意，字符串格式不是用单引号括起来，而是用“~”符号括起来。
也可以使用async-validator官网(https://github . com/Yiming he/async-validator)的方法：
util.format(%s必须是小写字母数字字符，rule.field)，
util文件包含format方法。这个util.ts文件在官网的src/目录下。它是一个ts文件，类似于一个公共方法。
实际上，您可以返回一个错误数组，即错误，例如：
常量错误=[]；
Errors.push(新错误(要求是：英文字母开头，后面跟字母数字字符和_-。@ symbol ))；
Errors.push(新错误( 3444需要英文))；
返回回调(错误)；
但从实际效果来看，表单只显示第一行的提示，估计Element的表单不支持显示多行错误信息。
来源：是调用验证的属性对象。你可以打印出来看看。
选项，附加参数，主要是预定义的消息格式，也可以打印出来看看。
更复杂的检查器可以携带参数，例如：
//整数范围值检查
export const in transge validator=(min，max)=(rule，value，callback)={
var isin range=(value=min)(value=max)；
const reg=/^-？\ d $/；
var isInt=reg . test(value)；
if(is range is int){
返回回调()；
}否则{
返回回调(新错误(`必须是整数[${min}，${max} ]`)从${min}到$ { max })；
}
}
用法：
formData.age: [
{ validator:in transge validator(1，100)，trigger: blur}
],
表示一个整数，其formData.age属性的取值范围为1-100。
自定义验证器validator提供了一个自由空间，可以使用常规的匹配、数值计算、比较等操作进行复杂的验证，所以常用。然而，有时使用定制验证器太麻烦了。
用户定义的验证器不一定要放在外部文件中，也可以放在vue文件中。
放置在数据中，但不包括在返回中，末尾没有逗号。
const loginNameValidator=(规则，值，回调)={
常量=/^[a-zA-Z][\w-.@]*$/;
if(value== value==undefined value==null){
回调()；
}否则{
如果(！注册测试(值)){
回调(新错误(要求是：英文字母开头，后面是字母数字字符和_-。@ symbol ))；
}否则{
回调()；
}
}
}
或者在规则中直接定义：
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
{验证器(规则，值，回调){
常量=/^[a-zA-Z][\w-.@]*$/;
if(value== value==undefined value==null){
回调()；
}否则{
如果(！注册测试(值)){
回调(新错误(要求是：英文字母开头，后面是字母数字字符和_-。@ symbol ))；
}否则{
回调()；
}
}
},
触发器：“模糊”}
],
3.3、类型type
type的基本用法如下：
formData.age: [
{类型：整数，消息：值必须是整数，触发器：模糊 }，
],
类型也是一个规则项目。如果不符合类型要求，将给出错误消息。
支持的规则类型如下：
字符串，字符串类型，这是默认类型。如果不指定类型，默认为string。
数字，数字类型。包括整数和小数。
整数，整数类型。
Float，浮点类型，此时不能是整数，必须有小数点。
布尔型，布尔类型，真/假值。
数组，数组类型。
对象，对象类型，不能是数组。
枚举，枚举类型，然后需要声明枚举类型。
方法，函数(或方法)的类型。
正则类型Regexp必须是合法的正则表达式，可以由new RegExp创建。
日期、日期类型和值必须转换为生效日期值。
Url、url类型和值需要符合url格式。
邮件，邮件类型，符合邮件格式。
Hex，十六进制表示的形式。比如0xFF12。
任何，任何类型，不限。
这里的url和email类型可以直接用于相关含义的属性验证，比如：
formData.email: [
{类型：电子邮件，消息：必须符合电子邮件地址格式，触发器：模糊 }
],
类型也很有用。这些内置的类型使得我们没有必要通过定制的验证器来处理它们。
对于数值型(number，integer，float)和布尔型，由于输入是字符串，所以必须进行类型转换，否则验证会失败。这涉及到变换的使用。
3.3、数据转换transform
Transform是一个钩子函数，它可以在开始验证之前先处理然后验证数据。比如下面这个例子：
formData.age: [
{
类型：整数，
消息：“该值必须是整数”，
触发器：“模糊”，
transform(value){ return parse int(value)；},
},
],
转换类型转换后，formData.age属性的检查规则可以正常使用，否则总是会导致类型检查失败。(这里其实有些问题，比如允许输出12ab的值，parseInt得到的值是12)
对于类型转换，transform有一个更简洁、更严格的表达式：
formData.age: [
{
类型：整数，
消息：“该值必须是整数”，
触发器：“模糊”，
转换：数字}，
},
],
转换成数值型，就这样。1.2或12ab的值无法通过验证。
除了类型转换之外，Transform还可以执行其他处理，例如：
formData.age: [
{type: string ，pattern:/1/，message:值是1到100之间的数字，transform(value){ return parse int(value)=1 perseint(value)=100？1 : 0;},}
],
等于某个值：
formData.age: [
{type: string ，pattern:/1/，message:值必须是50 ，transform(value){ return value== 50 ？1 : 0;},}
],
不等于某个值：
formData.age: [
{type: string ，pattern:/0/，message: value不能是50 ，transform(value){ return value== 50 ？1 : 0;},}
],
3.4、数值范围Range
范围不是规则的属性字段，它由最小和最大属性体现。
如果类型type是string或array，则min和max表示长度。
如果类型type是数值类型(number、integer、float)，那么min和max表示值的范围。比如：
formData.age: [
{
类型：整数，
消息：“该值必须是1到100之间的整数”，
最小：1，
max:100，
触发器：“模糊”，
转换：数字，
},
],
这样，范围检查可以直接使用规则的内置属性，并在规则中描述它们，而不需要使用intRangeValidator检查器和常规匹配方法。
3.5、枚举值
枚举值类型的用法示例：
formData.idType: [
{
Type: enum ，enum: [2，4，6]，message:`结果不存在，trigger: [change ， blur]，transform(value){返回值(value) * 2}，
},
],
或者：
formData.gender: [
{
类型：枚举，枚举：[男性，女性]，消息：`结果不存在，触发器：[更改，模糊]，
},
],
使用有以下问题：
反应慢，就是前几次输入，没有验证，一旦有验证，后面就可以了。
对于后一种情况，即范围是一组字符串，验证是正常的。对于前一种情况，即范围为整数，0也通过了检查，导致任意字符串也通过了检查，这是一个bug。
因此，您也可以使用字符串枚举值来检查范围：
formData.age: [
{
类型：“枚举”，
枚举：[1]，
消息：“该值必须是1到100之间的数字”，
转换(值){
如果(！isNaN(值)){
return parse int(value)=1 parse int(value)=100？1 : 0;
}否则{
返回“0”；
}
}
},
],
注：1e3和9e811此时被认为通过验证，因为parseInt函数只取E之前的数，isNaN认为是数。看来还是需要配合常规的规则。
3.6、正则Pattern
模式是正则表达式匹配检查规则，例如：
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
{pattern:/^[a-zA-Z][\w-.@]*$/,
消息：“要求是：英文字母开头，后面是字母数字字符和_-。@ symbol ，
触发器：“模糊”}
],
效果与前面的loginNameValidator相同，但不同的是loginNameValidator可以重用，保持常规检查。如果需要修改，只需要换一个地方。使用模式就不是这样了。然而，使用pattern可以编写更少的自定义检查器，给用户一个选择。
使用pattern属性，可以检查某个值是否等于某个值。
等于某个值：
{模式：/120/，消息：必须是120 ，触发器：模糊 }
关于js正则表达式，可以先用js正则表达式在线测试工具进行测试，检查是否达到预期效果。Js正则表达式在线测试地址：https://c.runoob.com/front-end/854.
3.7、长度len
Len属性，如果类型是字符串或数组，cold表示长度。如果是数值，则表示数值就是len属性值。
len属性与min和max属性同时出现，并且len属性具有更高的优先级。
Len属性，可用于检查格式化字符串，如ID号的长度。
Len也可用于检查它是否等于某个值，例如：
formData.age: [
{
类型：整数，
消息：“值要求必须是6岁”，
莱恩：六岁，
触发器：“模糊”，
转换：数字，
},
],
3.8、空白whitespace
空格是由所有空格组成的字符串，规则的类型必须是字符串。如果符合规则，将发出警报。比如：
formData.email: [
{whitespace: true，消息：只存在空格，触发器：模糊 }
],
如果该值为空，将会发出警报。
如果不希望空格干扰检查，可以使用transform来处理它：
transform(value){ return value . trim()；}
3.9、i18n
Message支持i18n，即国际处理，如集成vue-i18n。消息属性的用法如下：
消息：()=这个。$t(关于 )
中文显示“关于”，英文显示“关于”。
当然，你也可以改变到任何其他功能，例如：
message:()=this . mymessagehandler(MessageId，paramValues)
4、规则校验的高级模式
4.1、异步校验器asyncValidator
异步检查器用于远程访问，它通过ajax或axios请求数据，检查响应数据或提示异常。
本地页面验证属于串行验证，逐个检查每个字段的验证规则，如果失败则返回验证失败。
远程验证是异步验证，多个请求的响应时间不一样，所以无法预测响应的顺序。
异步校验的功能：前端和后端可以对相同的属性字段使用相同的校验规则，后端可以统一提供校验。但也增加了前端通信和一致性维护的成本。
目前，不使用异步检查器。这里用的是官网的例子：
async field 1:{ async validator:myasync validator }
MyAsyncvalidator可以放在与validator类似的位置。假设它放在数据中。
const myAsyncValidator=(规则，值，回调)={
ajax({
网址： xx ，
价值：价值，
}).然后(函数(数据){
回调()；
}，函数(错误){
回调(新错误(错误))；
});
}
承诺异步现场验证：
const myasyncdvalidator=(rule，value)={
返回ajax({
网址： xx ，
价值：价值，
});
}
不同之处在于，Promise异步字段验证需要用户自己编写。然后/。catch处理逻辑，不支持回调。
异步验证还涉及选项属性，
选项：{ first: true }，
First true意味着当第一个检查失败时，多个异步检查将不处理其他异步检查。
4.2、深层规则Deep rules
对于Object对象或Array数组的验证，需要具体到每个元素(成员)。这里使用了深层规则。
深层规则涉及字段和默认字段。
如官网的例子(根据习惯形式略加修改):
对象的深度检查：
规则：{
地址：[{
类型：“对象”，
必填：真，
选项：{ first: true }，
字段：{
街道：[{ type: string ，必需：true }]，
城市：[{ type: string ，必需：true }]，
zip: [{ type: string ，required: true，len: 8，message:无效的zip }]，
},
}],
name: [{ type: string ，required: true }]，
};
数组的深度检查：
规则：{
角色：[{
类型：“数组”，
必填：真，
莱恩：3，
字段：{
0: [{ type: string ，必需：true }]，
1: [{ type: string ，必需：true }]，
2: [{ type: string ，必选：true }]，
},
}],
};
数组的深度检查看起来很傻。每个成员都必须制定检查规则。对于动态数组，好像不知道怎么设置。
DefaultField属性使我们可以统一设置字段校验规则。此属性可应用于一个或多个验证属性字段。
例如：
规则：{
URL:[{
类型：“数组”，
必填：真，
默认字段：{ type: url }，
}],
};
如果是对象数组，怎么设置？可以按如下方式完成：
规则：{
人员：[{
类型：“数组”，
必填：真，
默认字段：{
类型：“对象”，
必填：真，
字段：{
地址：[{
类型：“对象”，
必填：真，
字段：{
街道：[{ type: string ，必需：true }]，
城市：[{ type: string ，必需：true }]，
zip: [{ type: string ，必选：true，len: 8，
消息：“无效的zip”}]，
},
}],
name: [{ type: string ，required: true }]，
}
}
}],
};
数组对象，对象集合子对象，看起来有点复杂。
4.3、动态规则集
有时不同的模式进入表单，需要应用不同的规则。如添加和编辑操作，显示相同的页面组件。然而此时，页面上需要检查的属性字段是不同的。如何设置它们？
有两种解决方案。方案一是配置两套规则集，根据不同的模式进行切换；方案二是配置通用规则集，根据不同的模式提取合适的属性字段和规则，动态构建规则集。
4.3.1、切换校验规则集
切换检查规则集，示例代码如下：
//数据部分
//当前规则集
规则：{}，
//模式1规则集
规则1:{
.
},
//模式2规则集
规则2:{
.
},
//方法部分
//动态切换
//页面初始化
init(obj，data){
this.prevForm=obj
//设置页面可见
this.visible=true
//在DOM更新后执行
这个。$nextTick(()={
//重置当前页面的所有字段值
这个。$refs[form]。resetFields()；
if(数据){
//模式1
this . form . pattern type=1；
}否则{
//模式2
this . form . pattern type=2；
}
//设置验证规则
this . setvalidrules(this . form . pattern type)；
}
},
setValidRules(patternType){
if(patternType==1){
this . rules=this . rules 1；
}else if(patternType==2){
this . rules=this . rules 2；
}
},
这样，根据不同的模式，切换检查规则集。为了在切换规则时立即执行规则验证，您需要将el-form的validate-on-rule-change设置为false，即：
El-form ref= form :model= form :rules= rules
:规则更改时验证=假
label-width= 100px style= line-height:30px；
4.3.2、动态构建校验规则集
构建动态检查规则集。示例代码如下：
//数据部分
//当前规则集
规则：{}，
//完整的规则集
所有规则：{
formData.loginName: [
{必填：true，消息：登录名不能为空，触发器： blur}，
{验证程序：loginNameValidator，触发器： blur}
],
formData.passwd: [
{必填：true，消息：密码不能为空，触发器：模糊 }，
{最少6位，最多18位，信息：“密码6-18位”，触发器：“模糊”}
],
formData.email: [
{类型：
email, message: 需要符合email格式, trigger: blur}
],
genderLabel: [
{required: true, message: "性别不能为空", trigger: change},
],
userTypeLabel : [
{required: true, message: "用户类型不能为空", trigger: change},
],
deptLabel: [
{required: true, message: "部门不能为空", trigger: change},
]
},
// methods部分
// 动态切换
// 页面初始化
init(obj,data){
this.prevForm = obj;
// 设置页面可见
this.visible = true;
// DOM更新之后执行
this.$nextTick(()=>{
// 重置当前页面的所有字段值
this.$refs[form].resetFields();
if (data){
// 模式1
this.form.patternType = 1;
}else{
// 模式2
this.form.patternType = 2;
}
// 设置校验规则
this.setValidRules(this.form.patternType);
}
},
setValidRules(patternType){
if (patternType == 1){
// 模式1
// 先清空，再设置
this.rules = {};
this.rules[genderLabel] = this.allRules[genderLabel];
this.rules[userTypeLabel] = this.allRules[userTypeLabel];
this.rules[deptLabel] = this.allRules[deptLabel];
this.rules[formData.email] = this.allRules[formData.email];
} else{
// 模式2，需要验证登录名和密码
this.rules = {};
this.rules[formData.loginName] = this.allRules[formData.loginName];
this.rules[formData.passwd] = this.allRules[formData.passwd];
this.rules[genderLabel] = this.allRules[genderLabel];
this.rules[userTypeLabel] = this.allRules[userTypeLabel];
this.rules[deptLabel] = this.allRules[deptLabel];
this.rules[formData.email] = this.allRules[formData.email];
}
},
同样也需要设置el-form的validate-on-rule-change为false。
4.4、动态表格字段校验
有的表单，使用了可编辑的动态表格，如添加一数据行，直接在数据行中输入数据，然后提交。此时需要对数据行各字段的输入进行校验。
有2个方案。
方案1使用Deep rules的defaultField，对对象数组进行字段校验，见上面的示例代码。
方案2，在el-form-item层级使用rules属性绑定该字段规则。
4.5、多字段联合校验
多字段联合校验应用场合还是比较常见的，如文本开始的问题，不同ID类型，有不同的校验规则；如密码验证，两次密码要相同；如购买数量不能超过库存数量，时间段开始时间要不大于结束时间，等等。
关键技巧，利用校验器的第一个参数rule，添加一个或若干个自定义属性，传递信息到校验器进行处理。使用方法如下：
作为示例，假设formData.email字段校验依赖于userType的值。
formData.email: [
{validator : idFieldWithTypeValidator, trigger: blur,}
],
没有办法初始绑定：
formData.email: [
{validator : idFieldWithTypeValidator, trigger: blur,userType:this.form.formData.userype}
],
这样写，浏览器调试器显示错误，提示调用resetFields出错。
因此，正确的形式为：
formData.email: [
{validator : idFieldWithTypeValidator, trigger: blur,}
],
或：
formData.email: [
{validator : idFieldWithTypeValidator, trigger: blur,userType:0}
],
然后，在页面初始化时，或选择框选择改变的chage事件方法中，动态设置规则中userType属性的值：
this.rules[formData.email][0][userType] = this.form.formData.userType;
试验结果，用$set没法动态绑定，即下列语句没有作用：
this.$set(this.allRules[formData.email][0],userType,this.form.formData.userType);
好了，现在可以编写一个联合校验器idFieldWithTypeValidator了。简单起见，在data部分编写：
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 获取用户类型
console.log(rule);
return callback();
}
测试一下，在浏览器控制台输出rule的打印信息如下：
{
"userType": 2,
"field": "formData.email",
"fullField": "formData.email",
"type": "string"
}
此时，userType已经通过rule参数传入，现在可以进行联合校验了。
import {loginNameValidator,phoneNoValidator,idNoValidator,eMailValidator} from @/common/validator.js
export default {
data() {
// 不同类型情况下的ID字段校验器
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 获取用户类型
console.log(rule);
if (rule.userType == 1){
// 手机号码
phoneNoValidator(rule, value, callback);
}else if(rule.userType == 2){
// 身份证号码
idNoValidator(rule, value, callback);
}else if(rule.userType == 3){
eMailValidator(rule, value, callback);
}
}
return {
....
}
},
...
}
其中phoneNoValidator、idNoValidator、eMailValidator分别是手机号码校验器、身份证号码校验器、邮箱格式校验器，由validator.js中输出，idFieldWithTypeValidator校验器根据userType参数的取值不同，分别调用了相关的validator类型的校验器。当然，在idFieldWithTypeValidator的方法代码中，也可以将各个校验器的代码搬过来，不调用外部校验器。
5、参考文章
除了官网资料外，本文还参考了下列文章：
[1]、浅析async-validator源码，https://zhuanlan.zhihu.com/p/32306570?edition=yidianzixun&utm_source=yidianzixun&yidian_docid=0I5IikUl。
[2]、Vue中Element表单验证的基本要素， https://www.php.cn/js-tutorial-406545.html。
[3]、element-ui 表单校验 Rules 配置，https://www.cnblogs.com/loveyt/archive/2020/07/11/13282518.html。
[4]、Element Ui使用技巧——Form表单的校验规则rules详细说明，https://www.cnblogs.com/xyyt/p/13366812.html
到此这篇关于Vue Element-ui表单校验规则实现的文章就介绍到这了,更多相关Element表单校验规则内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。