Vue+Element-UI，表单校验多语言切换

技术栈：Vue、Element-UI、Vi18n

在做项目时，按照ElementUI官方demo写法，将validator的函数和rules写在了data里，然后发现当表单有错误提示信息时，切换语言而不清除错误提示（clearValidate），校验文字的语言并没有跟着改变，必须手动刷新才能实现想要的效果。如下图：

解决方法：

将rules写入计算属性

computed:{
    rules(){
      let checkName = (rule,value,callback)=>{//校验方法
        if(hasChinese(value)||value.length>128){
          return callback(new Error())
        }
        callback();//即使校验通过也不要忘记callback
      }
      return{//规则字段
        web_user:[{validator:checkName,trigger:'change',message:this.$t('account.hint')}]
      }
    }

  }

写在最后：