首页 前端知识 Vue-validate(valid)

Vue-validate(valid)

2024-05-26 00:05:42 前端知识 前端哥 68 350 我要收藏

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属性来判断表单是否验证通过。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9501.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!