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