各个组件中的表单校验

　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

rules: {         name: [           {             required: true,             validator: (rule, value, callback) => {               if (!value) {                 return callback(new Error("请输入名称"));               }else{ //这个else 一定要写， 要不然校验就没有成功的返回值，validate并不会向下执行                 callback()               }             },             trigger: "blur",           },     ], }

    function validateForms(formRefs) {
        const formValidatList[];
        for (let i = 0; i < formRefs.length; i++) {
            const formValidat = new Promise((resolve, reject) => {
                let formRef = formRefs[i];
                if (formRef.length) formRef = formRef[0];
                formRef.validate((valid: any) => {
                    if (valid) {
                        resolve(ture);
                    } else {
                        reject(false);
                    }
                });
            });
            formValidatList.push(formValidat);
        }
        return Promise.all(formValidatList);
    }
　　　/**
　　　　*arr是form表单的ref数组，可以动态的配置arr，form表单可以分成多个，在有需要的时候进行校验
　　　　*/
    validateForms(arr).then(result => {
        log('success');
    })

记录一下校验的时候可能会出现的问题

form上的model一定要带上，否则

form item上要带上key 否则页面切换的时候会导致message信息消失

this.$refs?.[key][0].validate((valid, obj) => {

        console.log(valid, '...........');

        console.log(obj, '...........');

     })

会不执行

 上面的代码中key后面如果from-item循环出来的话需要取第零个

比较坑

@submit.native.prevent阻止默认的表单提交事件