【问题标题】:VeeValidate Confirmed Rule Fails With Custom ValidatorVeeValidate 确认规则因自定义验证器而失败
【发布时间】:2018-12-07 22:25:00
【问题描述】:

使用 Vee-Validate,当使用自定义验证器和已确认规则时,已确认规则始终无法通过验证。在被确认的输入字段上指定自定义验证器,如下所示:

 <input type="password" placeholder="Password" data-vv-as="password" v-model="password" name="password" v-validate="'required|min:8|has_upper'" />
<input type="password" placeholder="Password" data-vv-as="confirm" v-model="confirmPassword" name="confirmPassword" v-validate="'required|confirmed:password'" />

这是我的 Vue 实例:

 (function (Vue, VeeValidate) {

        VeeValidate.Validator.extend('has_upper', {
            getMessage: function (field) {
                return 'The ' + field + ' must contain an upper case letter';
            },
            validate: function (value) {
                return /^(?=.*[A-Z]).+$/.test(value);

            }
        });
     Vue.use(VeeValidate);
        var enroll = {
            el: "#app",
            data: {
                password:'',
                confirmPassword: ''
            }

        }

        var app = new Vue(enroll);

    })(Vue, VeeValidate)

密码字段的自定义验证器按预期触发,但是,如前所述,确认密码模型的确认规则总是失败。

【问题讨论】:

  • 我在 vee-validate 中的确认验证也遇到了很多麻烦。这听起来可能很愚蠢,但是如果两个密码匹配,它会失败,还是在您第二次输入密码之前立即失败?
  • 只要我没有将自定义验证器规则应用于密码或 confirmPassword 控制一切正常。当我添加自定义验证器时,它立即失败。

标签: vue.js vee-validate


【解决方案1】:

最近在 Vee-Validate(2.1.0 及更高版本)中,他们更改了参数的工作方式。现在,confirmed 的目标必须是一个 ref,所以这将起作用:

<input type="password" ref="password" name="password" v-validate="'required'" />
<input type="password" v-model="confirmPassword" name="confirmPassword" v-validate="'confirmed:password'" />

您真正需要做的唯一更改是将ref="password" 添加到您的密码输入中。

看到这里作者谈论这个变化:https://github.com/baianat/vee-validate/issues/1415

到目前为止,我没有看到文档中有任何更改,但我认为它会到来。

工作示例:https://codesandbox.io/s/km4lw12823

【讨论】:

猜你喜欢
  • 2019-12-23
  • 2019-12-12
  • 2020-07-23
  • 2013-10-17
  • 2017-07-31
  • 2020-04-11
  • 2021-06-06
  • 2017-07-25
  • 2018-05-25
相关资源
最近更新 更多