Vue-validate(valid)

validate(valid) 是用来验证表单数据是否合法的方法，它可以在表单提交前对表单数据进行验证，如果数据不合法，则可以组织表单提交，从而避免了不必要的错误和数据丢失。

1.在Vue组件中，一个名为 valid的 data 属性，它是用于存储表单验证的状态，如果 valid 值为true，则表单提交，如果valid 值为 false，则表单不可以提交。

data(){
    return {
        valid:false,
        form:{
            //表单数据
        },
        rules:{
            //表单验证规则
        }
    }

}

2.在表单中绑定v-model 指令，将表单数据与组件实例中的form 属性进行绑定：

    <el-form :model="form">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"/>
        </el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form>

3.在submitForm 方法中，调用验证通过，将valid 的值设置为 true,否则为 false:

            methods:{
                submitForm(){
                    // this.$refs.form.validate((valid)=>{
                    //直接对表单对象进行操作，上面是vue2的写法，其实更好懂
                    state['formRef'].validate((valid)=>{

                        if(valid){
                            this.valid = true
                        }
                        else{
                            this.valid = false
                            return false
                        }
                    })
                }
            }

4.在表单项中定义验证规则

rules:{
        username:[{required:true,trigger:'blur',message:'请输入用户名'}],
        password:[{required:true,trigger:'blur',message:'请输入密码'}],
}

这样，在提交表单时，validate() 方法会对表单数据按照验证规则进行验证，如果有验证失败的情况，会返回 false并提示错误信息。如果所有验证规则都通过，返回true 并提交数据。通过valid属性来判断表单是否验证通过。