vue表单验证的时候提示 async-validator:‘‘ is not a string

原创已于 2023-01-13 08:53:29 修改 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-01-13 00:21:57 首次发布

java 专栏收录该内容

6 篇文章

订阅专栏

文章讲述了在尝试将VuexStore中的数据存储到sessionStorage时遇到的JSON.stringify循环引用问题，导致async-validator验证出错。当store较大或者包含正则表达式时，存储和恢复数据的过程出现了问题，影响了应用的状态管理。解决方案包括处理正则表达式的JSON序列化以及解决循环引用的错误。

刚开始也一直找async-validator这个包的问题，一位是文本框输入数据类型的问题，

按照网上的各种思路测试了，没有效果。

后来发现是自己的所有reg表达式写在了vuex store ，存到了session storage中，

    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('start', JSON.stringify("sessionStorage start"))
      sessionStorage.setItem('regTemplate', JSON.stringify(this.$store.state.regTemplate))
      sessionStorage.setItem('user', JSON.stringify(this.$store.state.user))
      // sessionStorage.setItem('store', JSON.stringify(this.$store.state)) //报错JSON.stringify循环引用了
      sessionStorage.setItem('end', JSON.stringify("sessionStorage end"))

      localStorage.setItem("test","test localStorage");

    })

但是，store比较大，在转JSON的时候，出现了JSON循环引用，而浏览器有时候不报错误（不知道为啥），导致没有存下去，而在另外的地方又重新加载了

 // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }

由于模板在this.$store.state.regTemplate 中，这时候其实所有规则都空了，导致async-validator报类型错误，其实是因为空了。

几种情况：