正则校验密码时异常？含大小写、数字、特殊字符规则不生效

核心问题点 #

• v-validate属性绑定方式错误：当前写法是静态属性赋值，没有加动态绑定标识，Vue会把花括号包裹的规则内容当成纯字符串传给校验插件，完全不会解析成可执行的JS校验规则，所有配置的必填、最小长度、正则规则都没有被插件读取。
• 正则内容存在解析错误：原正则的特殊字符集合中写了&，这是HTML转义实体，实际设计的特殊字符匹配逻辑被破坏，字符类现在会把&、a、m、p都识别为合法特殊字符，完全不符合规则要求。
• 校验体系混用：代码中同时集成了Vuelidate（通过$v.user.xxx、v-model.trim="$v.user.password.$model"实现的校验逻辑）和VeeValidate（通过v-validate、errors.has()、validateAll()实现的校验逻辑），两套体系独立运行、状态不互通，会出现触发了一套校验流程，另一套的错误状态完全不更新的问题。
• 确认密码规则配置错误：第二个密码框的v-validate="'confirmPassword'"没有匹配VeeValidate的规则语法，默认的密码确认校验要求关联原密码字段名，当前字段配置完全无法触发校验。
• 提交按钮状态逻辑缺失：按钮的禁用判断仅校验两次密码是否相等，没有关联校验通过的状态，哪怕输入的密码不符合字符组成规则，只要两次输入一致按钮就保持可点击。

具体修复步骤 #

1. 修正校验绑定方式，将规则抽离到data中定义，通过动态绑定传入v-validate：

   <!-- 给v-validate加动态绑定前缀 -->
   <input
     ...
     v-validate="validateRules.password"
   />
   

   data() {
     return {
       user: {
         password: '',
         confirmPassword: ''
       },
       validateRules: {
         password: {
           required: true,
           min: 10,
           // VeeValidate v2版本的regex规则需将正则放在pattern属性中
           regex: {
             pattern: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).*$/,
             message: 'Password must contain at least 1 uppercase, 1 lowercase, 1 number and 1 special character'
           }
         }
       }
     }
   }
   

   修正正则中的转义错误，把原HTML实体&替换为正常的&。
2. 统一校验体系，禁止混用：如果使用VeeValidate，就删掉所有和$v.xxx相关的Vuelidate代码；如果使用Vuelidate，就删除v-validate相关的插件调用逻辑，避免两套状态冲突。
3. 修正确认密码的校验规则，正确关联原密码字段：

   <input
     ...
     v-validate="{ confirmed: 'password' }"
   />
   

4. 补全提交按钮的禁用逻辑，关联整体校验状态：

   <button
     ...
     :disabled="user.confirmPassword !== user.password || !this.$validator.validateAll()"
   >Register</button>
   

5. 修正错误信息的字段匹配，把原来监听的password_confirmation改成实际字段名confirmPassword，避免错误信息匹配不到不展示。

内容的提问来源于stack exchange，提问作者T dhanunjay