javascript - How to check passwords match in vanilla Vue.js? - Stack Overflow

admin管理员组

文章数量:1410697

I'm new to Vue.js and I'd like to check if passwords are matched. If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear. I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure 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
    }
  }
})

I'm new to Vue.js and I'd like to check if passwords are matched. If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear. I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure vue.js?

https://jsfiddle/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
    }
  }
})

• javascript
• vue.js

Share Improve this question Follow edited Dec 20, 2018 at 16:14 Babr asked Dec 20, 2018 at 16:06 BabrBabr 2,0911414 gold badges3535 silver badges4949 bronze badges 4

• 3 When do you want to show the user this information? When they submit the form? Or in real-time as they type? For the first, I'd use a @submit on the form that validates and alerts the user if there are issues. For the second, a puted property like passwordsMatch: function() { return this.password == this.password2; } and a v-if="!passwordsMatch" somewhere to display an error. – ceejayoz Commented Dec 20, 2018 at 16:11
• Well, I want the message to appear just after user leaves the password2 and gets to the next field. I don't want to bother them while they are typing, nor wait until the form is submitted. – Babr Commented Dec 20, 2018 at 16:15
• @ceejayoz you should make this ment an answer and add a focus test in the puted property ;) – papillon Commented Dec 20, 2018 at 16:25
• @Babr You could make your puted property check that something is in both fields, if you like. – ceejayoz Commented Dec 20, 2018 at 16:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It sounds like you want to use an onblur event to run a validation on the two password values. A very basic implementation might look like this.

...

<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://v2.vuejs/v2/guide/events.html

You can get a lot of help if you use something like validate.js to validate your passwords too.

http://validatejs

本文标签： javascriptHow to check passwords match in vanilla VuejsStack Overflow