我正在参加「掘金·启航计划」
作为一名前端开发，如果有一天你为写校验而苦恼，你是否愿意回头看我一眼？如果有一天你发现项目历史校验一团糟，你是否愿意将它优化？如果我问你什么，你是否想到，这篇合格的文章。
背景问题
1.前端开发成本高，创建表单需要独立增加校验。
2.代码冗余量大，大量不同的表单，需要相同的校验规则。
3.历史问题，不同开发同学规则写法不统一。
4.维护成本高，每个表单需要单独维护一套校验规则。
目标
1.根据类型抽取公共的校验规则
2.简化前端开发，通过读取已经封装的公共规则，实现简单快速开发
3.减少维护成本，仅需维护公共的规则，将n个文件改动转为1个文件改动
公共规则的使用
1.公共校验规则类型
如果你需要将你项目的校验规则进行统一，那么你可以先进行分类，罗列出所需要的规则。
text('提示文本') [必填，文本输入框]
select('提示文本') [必填，选择输入框]
float('提示文本', 小数点限制位数, 是否必填) [可选是否必填,限制小数点位数的数值]
int [必填，范围>=0，整数]
email [必填，邮箱格式]
...新增维护后续自己加
2.定义公共校验规则
首先将校验规则进行抽取与定义，这里你可以像公共函数一样，放在指定的js文件中，或者用变量保存，或者放vuex。 由于我们系统使用的是vue3+elementUI，我这里将公共规则放在vuex的state中，以便后续取用。
使用vuex，在store的state中定义commonRules，用到的自定义校验函数，在store中声明（也可在指定js文件定义，在store中引用）。
// store中公共校验规则
state: {
commonRules: {
text: (message = "此项为必填项") => {
return [{ required: true, message, trigger: "blur" }];
},
select: (message = "此项为必填项") => {
return [{ required: true, message, trigger: ["blur", "change"] }];
},
float: (message = "此项为必填项", limit = 2, required = false) => {
return [
{ required, message, trigger: "blur" },
{ validator: validateFloat(limit), trigger: "blur" }
];
},
int: [
{ required: true, message: "此项为必填项", trigger: "blur" },
{ pattern: /^\d+$/, message: "请输入>=0的整数", trigger: "blur" }
],
email: [
{ required: true, message: "请输入邮箱地址", trigger: "blur" },
{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
]
// 。。。。。。新增后续自己加
}
}
// 校验规则使用到的公共函数方法
const validateFloat = (limit = 2, label = "当前输入") => {
return function (rule: any, value: any, callback: any) {
if (isNaN(value)) {
callback(new Error("请输入数字～"));
return;
}
if (value) {
const decimal = value.toString().split(".")[1];
if (decimal && decimal.length > limit) {
callback(new Error(`${label}仅到小数点后${limit}位～`));
return;
}
}
callback();
};
};
// 。。。。。。新增后续自己加
3.在表单中使用
在任意表单中，只要需要到校验规则，就可以使用，如同使用公共函数一样简单、统一
<el-form
ref="ruleFormRef"
:model="ruleForm">
<el-form-item
label="Activity name"
prop="name"
:rules="commonRules.text('Please input Activity name')"> 【文本输入框校验】
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item
label="Activity zone"
prop="region"
:rules="commonRules.select('请选择地区')"> 【下拉的校验】
<el-select v-model="ruleForm.region">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item
label="Resources"
prop="resource"
:rules="commonRules.email"> 【邮箱的校验】
<el-input v-model="ruleForm.desc" />
</el-form-item>
<el-form-item
label="Activity price"
prop="price"
:rules="commonRules.float('价格', 2)"> 【数字小数的校验】
<el-input v-model="ruleForm.price" />
</el-form-item>
