业务开发中，只要遇到提交类的表单，都不可避免的必须使用表单校验，而对于不同的业务场景，一般的校验方式可能就满足不了，这时就需要用其他的方式实现校验，这里基于element-ui整理归纳出多种场景下的表达校验方法。可根据需要选择合适的方法进行校验。
在element-ui中，对于在模板中的:rules中直接写校验和在data里面写校验的方式是最常用也是最简单的方式，这里不进行讲述。下面将讲述一些特殊的用法。
一、在methods中定义校验方法
直接在模板中的rules里调用。
优点：方便灵活，可以多处共用，动态传参和参数扩展，可以用于处理循环类动态扩展的组件。
缺点：不太适用于公共校验的封装。
核心代码格式如下：
//模板代码：
<el-input
:rules="{
validator: (rule, value, callback)=>validateFormItem(rule, value, callback,msg,info),
trigger: 'change'
}"
></el-input>
// methods中的方法：
methods: {
validateFormItem (rule, value, callback,msg,info) {
if(info/*满足条件*/){
callback()
}else{
callback("不满足条件")
}
}
}二、模板中:rules里内嵌方法校验
优点：直接在模板的rules里面内嵌方法，代码更直观，可以用于处理循环类动态扩展的组件。
缺点：条件处理过多时代码过于累赘，无法共用。
核心代码格式如下：
<el-input
:rules="[
{ required: true, message: '不可为空', trigger: 'blur' },
{
validator: (rule, value,callback) => {
if (!false) {
callback('不合法');
} else {
callback();
}
},
trigger: 'blur'
}]"
></el-input>
三、混入法
在mixins里定义好校验方法，在组件中直接引进来使用，可以在模板中调用，也可以在脚本data里调用。
优点：方便灵活，可以多处共用，动态传参和参数扩展。可以用于封装项目中共用的校验方法。
缺点：当组件是动态循环时，不太适用于data中调用的方式，多层校验分离显得代码有冗余。
注：也可以直接写到当前vue组件文件中，使用混入目的是多处使用时可以共用。
核心代码如下：
//1 mixins文件：
export default {
data() {
return {
//名称类：包含中文、字母、数字和下换线
specialCheck: (required = false, message) => {
return {
required: required,
pattern: /^[\u4E00-\u9FA5A-Za-z0-9-_/,.。]+$/,
message: message || "内容中不能包含特殊字符",
trigger: "change"
};
}
};
}
};
// 2 在要使用的vue组件中引入和混入
import verification from "@/verification";
mixins: [verification]
// 使用方式一：模板中使用
<el-input
:rules="[
{
required: true,
message: '请输入名称',
trigger: 'change'
},
specialCheck(true) // 这里直接使用，可以传参
]"></el-input>
//使用方式二： 脚本data中调用
export default {
data () {
return {
rulesForm: {
name: [
{
required: true,
message: "请输入名称",
trigger: "change"
},
{ max: 50, message: "长度不能超过 50 个字符" },
verification.data().specialCheck(true),//这里调用mixins中的校验方法
{ validator: validateFormItem, trigger: "blur" }//这里调用methods中的方法
]
}
}
}
}以上是工作中总结的特殊场景下的校验方法，各有优缺点，可以根据实际业务场景选择合适的实现方式。
原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/1826
赞 (1)
Ferrycoln
element-ui中日期组件的高级应用和实际业务场景的应用
« 上一篇
2021年4月3日 pm6:19
基于vue的前端性能优化归纳总结
下一篇 »
2021年4月10日 pm11:18
