el-form表单验证

1、具体步骤为

1. 定义el-form的rules属性，是一个对象，表单验证的规则都写在这个里面，不用定义为响应式对象。

2. 为每一个el-form-item定义ref属性，这里面的ref的名称，对应之前rules对象里面的属性名。

3. 编写具体验证规则。每一个属性都可以定义为一个数组，里面可以定义多个验证规则。

4. trigger:触发方式，改变再触发 change,得到焦点再失去焦点触发 blur。

5. callback: 验证失败时显示的错误信息。如果发现错误时没有回显错误信息，可能是之前你callback了一个空值导致的。

   rules:{
       attribute:[
           {
               required: true,
               trigger: ['change','blur']，
               message：‘触发后返回信息’
           },
           {
               trigger: [],
               validator: (rule,value,callback) => {
                   
               }
           }
       ]
   }
   

2、最佳实现，可以动态控制按钮是否点击

最佳实现(我自己尝试的感觉这种最全，有更好的可以分享给我啊): 全部都用validator规则验证，规定多个属性用来规定验证是否通过，watch这些个属性是否通过，从而实现按钮状态动态变化

rules: {
    attribute: [
        {
            required: true,
            trigger: ['change','blur']，
            validator: (rule,value,callback) => {
        	if(true){
        	data.isPass = true;
        }
        }
        }
    ]
};
watch([data.isPass], ()=> {
    
})

3、实现鼠标单击某一项实现错误信息消失

//为表单绑定ref对象
const form = ref(null);
//在表单的每一项加一个事件
@focus="() => {form.clearValidate('属性')}"