这篇文章主要介绍了验证器自定义验证及易错点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
验证器自定义验证及易错点验证器自定义验证易错点某视频剪辑软件里面如何自定义校验如下也可以自定义校验
validator自定义验证及易错点
validator自定义验证元素中形式组件提供了表单验证的功能，只需要通过规则属性传入约定的验证规则，并将表单项目的支柱属性设置为需校验的字段名即可。
而表单验证功能就包括验证器自定义验证，用法如图所示
在验证规则中自定义一个规则，命名随意，再给它一个触发函数，而规则自定义的方法如下
价值：输入的数据；回拨：回滚的对象
在这个箭头函数中定义自己想要的规则，就可以实现自定义，但要注意的是必须回滚
易错点写完测试时发现自定义的验证无法使用，但是其他验证缺没有任何问题，那原因就是在于数据没有绑定成功
这时就应该检查图中这三个地方，自定义验证时是需要这三个地方保持一致的，否则自定义验证不会成功
vue里面如何自定义校验
正常用的都是元素界面组件的形式表单；里面有校验规则；
如下El-form:model= rule form :rules= rules ref= rule form label-width= 100px class= demo-rule form
El-表单-项目标签=活动名称prop=name
埃尔输入v-model=ruleForm.name/el输入
/El-表单-项目
El-表单-项目标签=活动区域prop=region
El-select v-model=规则形式。区域 placeholder=请选择活动区域
埃尔选项标签=区域一值=上海/el选项
埃尔选项标签=区域二值=北京/el选项
/el-select
/El-表单-项目
El-表单-项目标签=活动时间需要
el-col :span=11
el-form-item prop=date1
El-date-picker type= date placeholder=选择日期v-model=规则形式。日期1 style= width:100%；/El-日期选择器
/El-表单-项目
/el-col
El-col class= line :span= 2 -/El-col
el-col :span=11
el-form-item prop=date2
El-时间选择器占位符=选择时间v-model=规则形式。日期2 style= width:100%；/El-时间选择器
/El-表单-项目
/el-col
/El-表单-项目
El-表单-项目标签=即时配送prop=交付
埃尔开关v-model=ruleForm.delivery/el开关
/El-表单-项目
El-表单-项目标签=活动性质prop=type
El-checkbox-group v-model=规则表单。类型
埃尔-复选框标签=美食/餐厅线上活动name=type/el-checkbox
埃尔-复选框标签=地推活动name=type/el-checkbox
埃尔-复选框标签=线下主题活动name=type/el-checkbox
埃尔-复选框标签=单纯品牌曝光name=type/el-checkbox
/el-checkbox-group
/El-表单-项目
El-表单-项目标签=特殊资源prop=资源
El-radio-group v-model=规则形式。资源
埃尔-无线电标签=线上品牌商赞助/el-radio
埃尔-无线电标签=线下场地免费/el-radio
/el-radio-group
/El-表单-项目
El-表单-项目标签=活动形式desc
El-input type= textarea v-model=规则形式。desc /El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )立即创建/el-button
El-button @ click=重置表单(规则表单)重置/el-button
/El-表单-项目
/el格式
脚本
导出默认值{
data() {
返回{
规则形式：{
名称： ,
区域： ,
日期1: ,
日期2: ,
发货：假的，
类型：[],
资源： ,
desc:" "
},
规则：{
名称：[
{必需：真，消息： 请输入活动名称，触发：模糊 },
{最少：3,最多：5,消息： 长度在3到5个字符，触发器：模糊 }
],
地区：[
{必需：真，消息： 请选择活动区域，触发器：更改 }
],
日期1: [
{类型： 日期，必需：真，消息：请选择日期，触发器：更改 }
],
日期2: [
{类型： 日期，必需：真，消息：请选择时间，触发器：更改 }
],
类型：[
{类型："数组",必需：真的，消息： 请至少选择一个活动性质，触发器：更改 }
],
资源：[
{必需：真，消息： 请选择活动资源，触发器：更改 }
],
desc: [
{必需：真，消息： 请填写活动形式，触发器：模糊 }
]
}
};
},
方法：{
submitForm(formName) {
这个参考文献[表单名]。验证((有效)={
如果（有效){
警报(提交!);
}否则{
console.log(错误提交！);
返回错误的
}
});
},
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
}
}
}
/脚本
也可以自定义校验如下：
通过验证器属性来自定义；是模拟形式表单那个自定义校验规则的
脚本
导出默认值{
data() {
var checkAge=(规则，值，回调)={
如果(!值){
返回回调（新错误(年龄不能为空));
}
setTimeout(()={
如果(!Number.isInteger(value)) {
回调（新错误(请输入数字值));
}否则{
如果(值18) {
回调（新错误(必须年满18岁));
}否则{
回调();
}
}
}, 1000);
};
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请输入密码));
}否则{
if (this.ruleForm.checkPass！==) {
这个参考文献。规则形式。验证字段(“检查通过”)；
}
回调();
}
};
var validatePass2=(规则，值，回调)={
if (value===) {
回调（新错误(请再次输入密码));
} else if(值！==this.ruleForm.pass) {
回调（新错误(两次输入密码不一致!));
}否则{
回调();
}
};
返回{
规则形式：{
通过： ,
检查通过： ,
年龄：""
},
规则：{
通过：[
{验证器：验证通过，触发器：模糊 }
],
检查通过：[
{验证程序：验证通过2,触发器：模糊 }
],
年龄：[
{验证器：检查，触发器：模糊 }
]
}
};
},
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
