Question

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

<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.value === this.password2.value)
    }
  }
})
...

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

如果您也使用validate.js之类的工具来验证密码，则会获得很多帮助。

http://validatejs.org

如何检查Vanilla Vue.js中的密码是否匹配？

1 个答案: