Vue使用vee-validate出现field属性未在实例上定义警告如何解决

直接触发警告的问题 #

• 你在密码输入框的<vee-field>组件上额外绑定了v-bind="field"属性，但你的组件实例中没有定义名为field的响应式变量，这就是触发Property "field" was accessed during render but is not defined on instance警告的直接原因。

补充说明：field变量仅在使用vee-validate的useField组合式API自定义表单项时才会生成，内置的<vee-field>组件已经内部处理了所有表单绑定逻辑，不需要手动绑定field变量。
修复方式：直接删除密码输入框<vee-field>标签上的v-bind="field"属性即可。

修改后的密码输入框代码参考：

<!-- Password -->
<div class="mb-3">
  <label class="inline-block mb-2">Parol</label>
    <vee-field
      name="password"
      type="password"
      class="
        block
        w-full
        py-1.5
        px-3
        text-gray-800
        border border-gray-300
        transition
        duration-500
        focus:outline-none focus:border-black
        rounded
      "
      placeholder="Parol"
    />
  <ErrorMessage class="text-red-600" name="password" />
</div>

隐藏的验证规则失效问题 #

• 你定义的验证schema中密码字段的key是parol，但模板里密码输入框的name属性是password，确认密码的校验规则也指向@password，字段名不匹配会导致密码校验、确认密码二次校验全部失效。
• age字段的验证规则末尾多了一个多余的竖线|，可能会导致规则解析异常。

修复方式：调整schema中的字段名和规则符号，修改后的schema参考：

schema: {
  ism: "required|min:3|max:100|alpha_spaces",
  email: "required|min:3|max:100|email",
  age: "required|min_value:18|max_value:100",
  password: "required|min:3|max:32",
  confirm_password: "confirmed:@password",
  country: "required|country_excluded:Karakalpakston",
  tos: "tos",
  genre: "required"
},

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