ElementUI的校验函数validator的传参与复⽤
动机
当我们使⽤ ElementUI 来做前端校验时，⼤多数项⽬都不会被其⾃带的简单校验规则所满⾜。所以我们经常需要⾃定义校验函数 validator 来满⾜我们的项⽬需求。⽽这时⼜会出现⼀个⽐较棘⼿的问题：这个⾃定义的 validator 由于⽆法传参，复⽤性极差。
⽐如我们上⼀篇⽂章做了⼀个⾃定义的中英⽂混合长度校验函数：
const validLength=function(rule, value, callback){
function getStrLength(str){
place(/[^x00-xff]/g,'xxx').length;
}
if(!value){
callback();
}el if(getStrLength(value)<=64){
callback();
}el{
return callback(new Error('不能超过 64 个字符'))
}
}
详情参见：
这时，有另⼀个表单想使⽤这个校验规则，但是要限制的长度不是 64 ⽽是 128 。尴尬的事情发⽣了 —— 由于⽆法传参，我们要把这个校验函数再写⼀遍。如果还有 n 多个别的地⽅也想使⽤，我们是不是还要把这⼀串重复的代码写 n 遍呢？这显然不是开发者们想要的。
场景
当⼀套⾃定义校验规则适⽤于多个表单，只有参数不同时。
传参的实现
传参的⽬的⽆⾮是不同的调⽤者可以访问到不同的数据，所以当普通的传参⽆法实现时，我们改变了思路：使⽤ bind 。
原理：不⽤的调⽤者调⽤函数时，通过 bind ⽣成⼀个新的函数，并改变其 this 的指向。
这时，我们只需要在校验函数内部使⽤ this 来获取“参数”就好啦：
const validLength=function(rule, value, callback){
function getStrLength(str){
place(/[^x00-xff]/g,'xxx').length;
}
if(!value){
callback();
}el if(getStrLength(value)<=this.maxLength){
callback();
}el{
return callback(new Error(`不能超过${this.maxLength}个字符`))
}
}
const length32 ={
maxLength:32
}
const length64 ={
maxLength:256
}
使⽤时：
//...
rules:{
name:[{
validator: validLength.bind(length32),
trigger:'blur'
}],
address:[{
validator: validLength.bind(length256),
trigger:'blur'
}]
}
//...
如此⼀来，我们就使⽤了⼀套校验规则对多个表单进⾏了限制，并且达到了灵活的传参效果。
