elementUI组件中表单⾃定义校验规则如何传递参数？
问题描述：在使⽤⽇期组件DatePicker时，需要⾃定义⼀个⽇期校验规则，为了后续的重复使⽤，需要将改校验⽅法抽成⼀个公⽤的校验⽅法，在抽象时需要⼏个⾃定义的参数⽤于辅助处理，那么这些参数该如何传递到⾃定义的校验⽅法中呢？
funny是什么意思中文需求如下：photo的复数
// 伪代码
function⾃定义校验(test1, test2, callback){
if(value ==='test1'){
callback()
}el(value ==='test2'){
callback()
}el{
callback()
}
}
element实现⽅式如下，先写好⾃定义校验函数，然后直接将该函数赋值给相应的prop即可，官⽅实例
// 不相关的内容被删减掉了
<el-form :rules="rules" ref="ruleForm">
<el-form-item label="年龄" prop="age">
<el-input></el-input>
</el-form-item>
</el-form>
<script>
export default{
data(){
// 定义校验函数
var checkAge=(rule, value, callback)=>{
// 以下是校验规则
if(!value){
return callback(new Error('年龄不能为空'));
}
tTimeout(()=>{
if(!Number.isInteger(value)){
callback(new Error('请输⼊数字值'));
}el{
if(value <18){
callback(new Error('必须年满18岁'));
}el{
callback();
}
英语考级怎么考}
},1000);
};
return{
rules:{
age:[
// 调⽤⾃定义校验函数
{ validator: checkAge, trigger:'blur'}
]
}
};headache怎么读
},
methods:{
...
}
}
</script>
通过上述可以看到表单在掉⽤⾃定义校验⽅法时直接将校验函数赋值给validator，以⼀个校验规则的形式成为age数组中的⼀个对象，为了⽅便理解，这⾥成为校验规则对象{ validator: checkAge, trigger: ‘blur’ }（⼀个prop可以有多个校验规则对象，所以age是⼀个数组）
且上⽅校验函数的⼊参有三个（rule, value, callback）
新的思考：①这三个参数分别是什么；②校验函数的⼊参必须这么写吗？
解答①rule是存放接收参数的对象；value是待校验的值；callback是回调函数（校验完后，要执⾏的操作，如抛错）②必须这样，为什么后⾯有解释
问题重述：如果根据我上⾯的需求，期望根据传⼊的test1和test2进⾏校验，且test1和test2的值是可动态调整，那么该如何实现
// 伪代码
function checkTime(rule, value, callback){
if(value ==='test1'){
callback()
}el(value ==='test2'){
callback()
}el{
callback()
}
}
研究发现校验函数要接收的参数直接以此作为⼀个属性放到校验规则对象中即可。
// 伪代码
rules:{
startDate:[
{ validator: checkTime, test1:'test1', test2:'test2'}
],
}
打印rule会有如下结果
// 伪代码
function checkTime(rule, value, callback){
console.log(rule, value)
...
}
上述说明参数test1和test2已经传⼊到rule中，剩下的就是根据⾃⼰的校验逻辑编写即可。所以element的⾃定义校验规则如何传参已经解决。
新的思考：我们理解的正常的传参应该如下所⽰：
正常的传参是
// 伪代码
function checkTime(test1, test2){}
// 调⽤教育机构网站
const validator =checkTime('test1','test2')
⽽上述③
{ validator: checkTime, test1:'test1', test2:'test2'}
是如何接收参数的，其中打印的结果中④field，fullField，type等字段并未传递⼜是怎样出来的？
对于③④我们猜测应该在未知的包中存在如下逻辑代码
// 伪代码
let rule ={}
英语单词墙
rule.field = rules.prop 即'startDate'
rule.fullField = rules.prop 即'startDate'
rule.validator = rules[startDate][0].validator
// 并且存在如下调⽤
const r = rule.validator(rule, value, callback)
最后通过查看element UI源码发现是由element引⽤的async-validator包中的调⽤⽅式所决定的
在async-validator代码中有下⾯这样⼀些处理
/
/ 局部源码
rule.validator = _ValidationMethod(rule);
rule.field = z;
rule.fullField = rule.fullField || z;
// 局部源码
var res = rule.validator(rule, data.value, cb, data.source, options);
if(res && res.then){
res.then(function(){
return cb();
},function(e){
thrones
return cb(e);
opera什么意思});
}
通过上述源码证实了我们的猜想，也验证了②必须以这样的格式（async-validator包中处理格式）实现。
延申：
如果想⾃⼰研究源码可以按照如下的⽅式进⾏：
找到node_modules包中element-ui包打开packages/form/src可以看到form-item.vue、form.vue、label-wrap.vue三个vue⽂件，其中label-wrap.vue主要是计算表单项的宽度，form.vue是整体表单逻辑，form-item.vue是表单⾥具体项逻辑处理，form-item.vue⽂件中会以此触发⼀下函数
// step1 300⾏
mounted(){
this.addValidateEvents();
}
// step2 288⾏
methods:{
addValidateEvents(){
const rules =Rules();
if(rules.length ||quired !== undefined){
this.$on('el.form.blur',FieldBlur);
// step3 监听表单变化
this.$on('el.form.change',FieldChange);
}
},
// step4 278⾏
onFieldChange(){
if(this.validateDisabled){
this.validateDisabled =fal;
return;
}
this.validate('change');
},
// step5 189⾏
validate(trigger, callback = noop){
this.validateDisabled =fal;
const rules =FilteredRule(trigger);
if((!rules || rules.length ===0)&&quired === undefined){
callback();
return true;
}
this.validateState ='validating';
const descriptor ={};
if(rules && rules.length >0){
rules.forEach(rule =>{
igger;
});
}
descriptor[this.prop]= rules;
// step6 207⾏此处调⽤async-validator包
const validator =new AsyncValidator(descriptor);
const model ={};
model[this.prop]=this.fieldValue;
// step7 到async-validator继续查找
validator.validate(model,{ firstFields:true},(errors, invalidFields)=>{
this.validateState =!errors ?'success':'error';
this.validateMessage = errors ? errors[0].message :'';
callback(this.validateMessage, invalidFields);
曲轴修理this.elForm &&this.elForm.$emit('validate',this.prop,!errors,this.validateMessage ||null);
});
}handsome
}
step 8 根据上述导航打开node_modules/async-validator/es/index.js
该⽂件中定义了⼀个Schema类，并在该类中定义了validate⽅法43⾏
// step9 43hang
validate:function validate(source_){}
在该⽅法中有以下内容
// step10
validate:function validate(source_){
...
rule.validator = _ValidationMethod(rule);// 124
rule.field = z;//125
rule.fullField = rule.fullField || z;//126
...
var res = rule.validator(rule, data.value, cb, data.source, options);// 216
if(res && res.then){
res.then(function(){
return cb();
},function(e){
return cb(e);
});
}
}
延申⼆可以在控制台Sources菜单下通过搜索上述所设计到的函数，定位到相应的位置进⾏debugger，然后⾃⼰动⼿调试调试。延申三想研究该模块的源码可以参考这位博主的⽂章
