Vue js vee 验证密码确认总是错误的 [英] Vue js vee validate password confirmation always false

查看：19
本文介绍了Vue js vee 验证密码确认总是错误的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<输入类型=密码"占位符=密码"v-model="密码"v-validate="'required|min:6|max:35|confirmed'"名称="密码"/>
<div><span>{{ errors.first('password') }}</span>

<div><输入类型=密码"占位符="确认密码"v-model="确认密码"v-validate="'required|target:password'"name="confirm_password"/>

<div><span>{{ errors.first('confirm_password') }}</span>

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

解决方案

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

<input v-validate="'required'" ... ref="password">(谢谢，莱利).

<块引用>

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

此外，您的 Vee Validate 语法有错误，请将 target: 更改为 confirmed:

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

应该

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

看看下面的基本示例，它会检查两件事:

  • 第二个输入字段是否有任何输入值?
  • 如果是，第二个输入值是否与第一个输入值匹配?

var app = new Vue({el: '#app',数据: {消息:你好，Vue！"}})

body {背景:#20262E；填充:15px；字体系列:Helvetica；}#应用程序 {宽度:60%；背景:#fff;边框半径:10px；填充:15px；保证金:自动；}

<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><脚本>Vue.use(VeeValidate);<div id="应用程序"><form id="演示"><!-- 输入 --><div class="input-group"><h4 id="标题">输入密码<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 class="alert alert-danger" v-show="errors.any()"><div v-if="errors.has('password')">{{ errors.first('password') }}

<div v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}

</表单>

进一步阅读:https://baianat.github.io/vee-validate/guide/rules.html#confirmed

I'm trying to use vee validate to verify the password using this code.

<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>

But it always says The password confirmation does not match. What went wrong in my code?

解决方案

Your password input must have ref="password" - that's how vee-validate finds the target:

<input v-validate="'required'" ... ref="password"> (Thanks, Ryley).

confirmed:{target} - Input must have the same value as the target input, specified by {target} as the target field’s name.

Also, there's an error with your Vee Validate syntax, change target: to confirmed:

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

should be

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

Have a look at the basic example below, it will check for two things: 

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>

Further reading: https://baianat.github.io/vee-validate/guide/rules.html#confirmed

这篇关于Vue js vee 验证密码确认总是错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆