【问题标题】:Vue js vee validate password confirmation always falseVue js vee验证密码确认总是假的
【发布时间】:2018-12-18 07:30:03
【问题描述】:

我正在尝试使用 vee validate 来使用此代码验证密码。

<div>
    <input type="password"
           placeholder="Password"
           v-model="password"
           v-validate="'required|min:6|max:35|confirmed'"
           name="password" />
</div>
<div>
    <span>{{ errors.first('password') }}</span>
</div>
<div>
    <input type="password"
           placeholder="Confirm password"
           v-model="confirmPassword"
           v-validate="'required|target:password'"
           name="confirm_password" />
</div>
<div>
    <span>{{ errors.first('confirm_password') }}</span>
</div>

但它总是说密码确认不匹配。 我的代码出了什么问题?

【问题讨论】:

    标签: validation vue.js vuejs2 vee-validate


    【解决方案1】:

    以下代码适用于我:https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

    <template>
      <ValidationObserver>
        <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
          <input type="password" v-model="password" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
    
        <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
          <input type="password" v-model="confirmation" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </ValidationObserver>
    </template>
    
    <script>
    import { extend } from 'vee-validate';
    
    extend('password', {
      params: ['target'],
      validate(value, { target }) {
        return value === target;
      },
      message: 'Password confirmation does not match'
    });
    
    export default {
      data: () => ({
        password: '',
        confirmation: ''
      })
    };
    </script>
    

    【讨论】:

    • 这项工作感谢您提供更多信息https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields
    【解决方案2】:

    您的密码输入必须有 ref="password" - 这就是 vee-validate 找到目标的方式:

    &lt;input v-validate="'required'" ... ref="password"&gt;(谢谢,Ryley)。

    confirmed:{target} - 输入必须与目标具有相同的值 输入,由 {target} 指定为目标字段的名称。

    另外,您的 Vee Validate 语法存在错误,请将 target: 更改为 confirmed:

    v-validate="'required|target:password'"

    应该是

    v-validate="'required|confirmed:password'"

    看看下面的基本示例,它将检查两件事:

    • 第二个输入框有输入值吗?
    • 如果是,第二个输入值是否与第一个输入值匹配?

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    body {
      background: #20262E;
      padding: 15px;
      font-family: Helvetica;
    }
    
    #app {
      width: 60%;
      background: #fff;
      border-radius: 10px;
      padding: 15px;
      margin: auto;
    }
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.js"></script>
    <script>
      Vue.use(VeeValidate);
    </script>
    
    
    <div id="app">
    
      <form id="demo">
    
        <!-- INPUTS -->
        <div class="input-group">
          <h4 id="header"> Enter Password</h4>
    
          <div class="input-fields">
            <input v-validate="'required'" name="password" type="password" placeholder="Password" ref="password">
    
            <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" placeholder="Password, Again" data-vv-as="password">
          </div>
        </div>
    
        <!-- ERRORS -->
        <div class="alert alert-danger" v-show="errors.any()">
          <div v-if="errors.has('password')">
            {{ errors.first('password') }}
          </div>
          <div v-if="errors.has('password_confirmation')">
            {{ errors.first('password_confirmation') }}
          </div>
        </div>
    
      </form>
    </div>

    延伸阅读:https://baianat.github.io/vee-validate/guide/rules.html#confirmed

    【讨论】:

    • 另外,您的密码输入必须有ref="password",因为这就是 vee-validate 找到“目标”的方式
    • @Ryley 更新了我的答案。
    • 非常感谢。非常有帮助的答案。 =)
    • v-validate 可以从名称中找到目标
    • @BennettDams 非常感谢。这对我有帮助。你能bold ref 的东西吗,这对我来说真的很重要。特别感谢 ryley guy - 你我的男人!。
    猜你喜欢
    • 1970-01-01
    • 2022-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-31
    • 2013-09-18
    • 2015-04-03
    • 2023-02-23
    相关资源
    最近更新 更多