各个组件中的表单校验

　

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阻止默认的表单提交事件