关于elemenui表单验证

描述下出现的bug

1 使用el-autocomplete的时候,如果输入的查询参数正好与最后查询出来的结果一样的话,则不会触发主动验证

2 像upload组件等,不能直接写v-model的组件,在进行操作的时候也会有这个问题

简单来说,就是 一般v-model的都没事,出事的一般都是自己封装的组件,通过@change去赋值的~

关于elemenui表单验证_第1张图片

这里,如果输入‘大毛’然后进行选择的话,则会触发trigger中的change;

但是,如果输入‘李大毛’再点击下拉的话,则不会再触发change(这个应该是el-input封装中的change)了

解决办法

validateField 手动验证



    


rules: {
  customerId: [{ required: true, message: '请输入客户姓名', trigger: 'change' }],
}

userVagueChange(val) {
    this.form.customerId = val.userId
    // 赋值之后再手动走一次rules中的customerId规则
    this.$refs.form.validateField('customerId', (err) => { })
}



// 当然,如果是 prop="personInfo.customerId"这种验证规则的话,也是一样的



    


rules: {
  'personInfo.customerId': [{ required: true, message: '请输入客户姓名', trigger: 'change' }],
}

userVagueChange(val) {
    this.form.personInfo.customerId = val.userId
    // 赋值之后再手动走一次rules中的customerId规则
    this.$refs.form.validateField('personInfo.customerId', (err) => { })
}

 

你可能感兴趣的:(工作中的js问题总结,vue)