首先vux中的表单验证在点击触发,失焦时才显示错误信息,如果不管它,它就没反应,这显然是不合理的;解决办法就是:在提交时做验证,不通过的话就使用.focus()及.blur()方法给它聚焦,失焦。

1  if(this.phone == ''){
2    this.$refs.phone.focus()//调起vux中的验证
3    this.$refs.phone.blur()5 }

注意:用vux组件时,选取DOM一定要用ref,不能用document,getElementById().

如果是多个表单需要同时验证,需要循环遍历每个项。

这里使用:ref=" 'item' +index",来动态表示每个输入框的dom;在验证时,需先遍历该表单数组;

  var res = this.cardForms.iopReceivableDetailCash
   for(var i = 0; i < res.length; i++){
      if(this.$refs['phone'+ i][0].currentValue == '' || this.$refs['phone'+ i][0].currentValue == undefined){   //非空验证
         this.$refs['phone'+ i][0].focus()
         this.$refs['phone'+ i][0].blur()
      }
  }
currentValue是输入框中的值,可以打印this.$refs['phone']看看,是个数组且只有一个值,所以选取[0]。

 

 

posted on 2020-03-11 16:04  千年寒冰90  阅读(622)  评论(0编辑  收藏  举报