tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
15.53k stars 1.63k forks source link

关于表单验证反馈的bug #6068

Open Flipped199 opened 1 week ago

Flipped199 commented 1 week ago

Describe the bug

关于表单异常值警告的bug 如下代码期望在用户输入正确的邮箱后显示警告状态文本,输入错误时显示错误信息

rulse:{
  email: [
    {
      trigger: 'blur',
      level: 'error',
      validator(rule, value) {
        if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
          return new Error('邮箱不正确')
        }
        return true
      },
    },
    {
      trigger: 'blur',
      level: 'warning',
      validator(rule, value) {
        return new Error('我们将向此电子邮件发送一个验证链接。请确保这是一个有效的电子邮件,否则您可能会失去对该链接的访问权限。')
      },
    },
  ],
}

Steps to reproduce

重现:

  1. 第一次输入正确,出现了警告状态文本,表现正常
  2. 第一次输入错误,出现错误文本,更正后出现警告文本,但此时状态仍然为错误状态(即红色)

虽然以上需求可以通过自定义验证解决,但是我认为这依然属于一个bug

Link to minimal reproduction

none

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 38.30 GB / 63.91 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.61)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    naive-ui: ^2.38.2 => 2.38.2
    vue: ^3.4.21 => 3.4.29

Used Package Manager

npm

Validations