给ELement 穿梭框加表单必填项验证，提示文字总是存在问题。该页面有提交功能

背景

目前项目中form表单提交中有地方用到了穿梭框，穿梭框是必填项，需要rules 验证是否选择了数据，一般穿梭框是change触发

问题

但是选择change触发，会出现如下问题，也就是用户一选，下面就触发校验规则了，用户体验很差

尝试解决方案

将校验触发改成blur，啊哈解决

但是又碰到新的问题

点击"确定&继续创建"按钮后触发字段未空的校验规则，

接着穿梭框即使选了东西，提示文字依然在，好的，又造了一个bug

解决方案

添加数据监听方法

watch: {
  'createForm.sectorList': function (newVal) {
    if (newVal.length > 0) {
      this.$refs.createForm.validateField('sectorList');
    }
  },
  'createForm.dimensionList': function (newVal) {
    if (newVal.length > 0) {
      this.$refs.createForm.validateField('dimensionList');
    }
  }
},

　　完美解决：

思考

change，是只要穿梭框发生变化，就触发校验规则，所以出现初始问题

blur 要是没有提交功能，确实很好，但是为什么点击“确定”按钮后触发一次校验规则后不消失，暂时没发现问题所在

完结撒花

__EOF__

本文作者：衣囧~
本文链接：https://www.cnblogs.com/user-yi/p/17853375.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！