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

技术栈:Vue、Element-UI、Vi18n

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

Vue+Element-UI,表单校验多语言切换_第1张图片

解决方法:

将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')}]
      }
    }

  }

写在最后:

你可能感兴趣的:(前端,vue,elementui)