如何在 vanilla Vue.js 中检查密码匹配？

Question

我是 Vue.js 的新手，我想检查密码是否匹配。如果它们不匹配，则在用户离开确认字段后，Passwords don't match!应显示错误文本。我已经看到了一些涉及使用插件的解决方案，但我想知道使用纯 vue.js 的惯用方法是什么？

https://jsfiddle.net/Babrz/L2md63j7/3/

<div id="app">
          <form >
          <div class="form-group">            
            <input type="email" class="form-control" placeholder="Email">            
          </div>
          <br>
          <div class="form-group">
            <input type="password" class="form-control" v-model="password" placeholder="Password">
          </div> 
          <br>

         <div class="form-group">
            <input type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
          </div>
          <small v-if="showError">Passwords don't match!</small>
          <br>

          <div class="form-group">

            <input type="text" class="form-control" placeholder="Age">            
          </div>         

           <br>

          <button type="submit" class="btn login-btn">Register</button>
        </form>
</div>

new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false    
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Answer 1

听起来您想使用onblur事件对两个密码值运行验证。一个非常基本的实现可能看起来像这样。

...

<input  v-on:blur="validate" type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
...

...
new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false
      
    

  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
    validate: function() {
        console.log(this.password === this.password2)
    }
  }
})
...

https://vuejs.org/v2/guide/events.html

如果您也使用诸如 validate.js 之类的东西来验证您的密码，您可以获得很多帮助。

http://validatejs.org