vue validator自定义校验,validator自定义表单验证
在某视频剪辑软件开发中，难免遇到各种表单校验，下面这篇文章主要给大家介绍了关于某视频剪辑软件表单验证规则及验证器验证器使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
目录
前言表单验证规则自定义校验规则总结
前言
为防止用户犯错，尽可能更早地发现并纠正错误。
元素中表单（表单)组件提供了表单验证的功能，只需要通过规则属性传入约定的验证规则，并将表单项目的支柱属性设置为需校验的字段名即可。
注意：道具对应表单域模型字段，使用生效方法时，该属性是必填的。
表单验证rules
以官网给出的例子分析来看
将支柱属性设置为需校验的字段名。
在数据里配置要校验字段和校验规则：
必填：真表示为必须输入；
消息：""设置不符合校验规则时的提示信息；
触发器：""设置校验的触发方式：
"更改":数据改变时触发；
模糊：失去焦点时触发；
没有进行任何输入时，不会触发改变，但一定会触发虚化事件。
设置校验规则后，表头会出现红色*样式
该示例完整代码：
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-表单-项目标签=活动形式表名
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()；
}
}
}
/脚本
自定义校验规则
除此之外，我们还可以使用验证器验证器来自定义校验规则，
举一个使用自定义验证规则来完成密码的二次验证的例子。
还是和之前一样，设置支柱需校验的字段名和v型车绑定值
但这时，我们需要在数据中自己定义校验规则，需要注意的是，设置的规则与返回同级。
在规则中配置要校验的字段和用到的规则
完整代码如下：
El-form:model= rule form status-icon:rules= rules ref= rule form label-width= 100px class= demo-rule form
El-表单-项目标签=密码prop=通过
El-input type= password v-model=规则形式。pass autocomplete= off /El-input
/El-表单-项目
El-表单-项目标签=确认密码检查通过
El-input type= password v-model=规则形式。check pass autocomplete= off /El-input
/El-表单-项目
El-表单-项目标签=年龄年龄
埃尔输入v型车。number=规则形式。年龄/El输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )提交/el-button
El-button @ click=重置表单(规则表单)重置/el-button
/El-表单-项目
/el格式
脚本
导出默认值{
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,触发器：模糊 }
],
年龄：[
{验证器：检查，触发器：模糊 }
]
}
};
},
方法：{
submitForm(formName) {
这个参考文献[表单名]。验证((有效)={
如果（有效){
警报(提交!);
}否则{
console.log(错误提交！);
返回false
}
});
},
resetForm(formName) {
这个。$ refs[表单名]。resetFields()；
}
}
}
/脚本
总结
关于vue表单验证规则和validator使用的文章到此结束。关于vue表单验证器使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。