Enable a simple password field in Vuetify.
Validating passwords is a repetitive task, but a task nevertheless. But, how do you make sure that the password field is modern and the password complies to pre-defined rules?
I don’t quite build super sensitive applications, and tend to use a simple VeeValidate or Vuelidate expression to validate passwords.
Here’s the Vue component..
We are doing a few basic things in the component -
- Basic layout using v-container and v-layout
- create a text field that is bound to a variable called
- the text field has an icon to show or hide password. It uses
eye-officons to indicate the states and controls whether password is hidden using the
You may also observe that we use a
@input= to use a one-way bind and update the password when text in the password field is changed. We do not use a two-way bind here because the password value is most likely garbled and does not make sense to be displayed against the password field.
Again, why is password garbled? - because passwords are typically encrypted and stored. They should not be decrypted and passed to client.
Also observe that the form itself is bound to
valid. We can use this variable in a button or any other event to do something only if all validations are passed.
So far we have just created a field and introduced bindings and rules. It is time to write all that in the
<script> tag in the same component.
The script rules use a simple validation library available in Vuetify to -
- Validate that a password is present
- Password complies to pre-defined rules - which in this case is a Regex. We want passwords to have min. 8 characters with at least one special character, capital letter and a digit
userPasswordis a variable used for demonstration purposes. You can either have this from a service that ties back to the server, or pull this in from Vuex state (which ties back to server!)