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

  }

写在最后：

最近写表单，发现之前自己有好多细节没有注意到，也因此踩了很多坑.

比如，rules整体我都copy了官方demo，但是校验的内容就是不对，后来发现，是form的绑定方式出了错，应该用    :model="form"    ，而不是v-model

踩坑的过程很蠢，但也让我意识到，自己以前确实缺乏对细节的重视。而且也让我意识到，很多东西，不是光会用就行，遇到问题的时候，理解其中原理，才能更好的排查。

继续加油！