Vee-验证密码并确认密码

Question

我正在尝试在vuejs上设置密码并重置系统，我在其中使用vee-validate来验证输入标签中输入的密码是否相同，如果它们不相同则阻止提交。 这是我的代码：

<template>
    <div>
    <form  @submit.prevent="validateBeforeSubmit()">
      <div class="input-group">
        <div class="input-group-addon">
          Enter Password
        </div>

        <div class="input-fields">
          <input v-validate="'required'" name="password" type="password" class="form-control" placeholder="Password">

          <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password">
        </div>
      </div>
      <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>

      <button type="submit" class="btn btn-primary">
            Validate!
        </button>
    </form>
    </div>
</template>

<script>
    export default{
        name:'password',

    methods: {
        validateBeforeSubmit() {
         this.$validator
            .validateAll()
            .then(function(response) {
              // Validation success if response === true
        })
        .catch(function(e) {
          // Catch errors
        })
    }
  }
}
</script>

Answer 1

您输入的密码必须具有ref="password"，因为vee-validate会找到目标

然后

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

代替

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

最终

  <div class="input-fields">
      <input v-validate="'required'" ref="password" name="password" type="password" class="form-control" placeholder="Password">

      <input v-validate="'required|confirmed:$password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password">
  </div>