Learn about form validation in vue.js

Tram Ho

Form validation is forcing the user when entering information on the form to follow the rules set by the developer.

Getting Started With VeeValidate

First we need the Vue and the VeeValidate library. We will make the CDN available for Vue.js: https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js & https://cdn.jsdelivr.net/npm/ [email protected] /dist/vee-validate.js

Create 1 file register.html & add content:

The above code shows that using VeeValidate in Vuejs application is relatively easy.

VeeValidate Rules

VeeValidate rules are rules that set limits or conditions for what can be entered into one or more fields.

Authentication rules are checked when you update a record that contains fields that require authentication.

If the rule is violated, an error may occur. To use the rule you just need to apply the v-validate directive on your input and pass a string value that is a list of assertions separated by a “|”. For example, we will use the required rules & email :

In addition, you can validate 1 way the link works more

Now every time the input changes, the validator will run a list of validations from left to right. To validate input data errors. You can see more VeeValidate rules here: http://vee-validate.logaretm.com/rules.html#available-rules

VeeValidate Errors

By default VeeValidate provides us with an error variable that is included in the data section of the Vue component by the plugin. When pattern validation fails, VeeValidate turns this error with an array containing failed authentication objects, which can be accessed in the following way:

However, to use this method, the name attribute must be specified.
You can use data-vv-name for a number of reasons, you can use the name attribute in your template.

VeeValidate Custom Validation

While VeeValidate provides about 30 rules, these rules may be unfair to your appearance as intended. What if we need custom authentication that VeeValidate does not include? For example, what if we want to verify that the username is unique in our database? VeeValidate allows you to write custom validation rules and messages. Take a look at the code below:

Important notes to note are: The getMessage method in the object is used to return a custom error message. The message can be transmitted directly or passed to a variable from the data called from the validate method. The validate method in the object returns a boolean, an object. If it returns an object, the valid attribute must have a boolean value. This boolean value is what is checked to see if the form is valid. In our case, we checked to see if the value is included in the username list we want the user to select. Now we have some new rules. VeeValidate will not automatically know about this rule. We need to proceed with this new rule:

In this example, we only extend the VeeValidate validator with our own custom validator that validates names via checkuser . So we can call Validator for any input this way:

Validating A Simple Registration Page

We will do a little demo together. Return to the originally created register.html file and add the following HTML:

In the above code we have 5 inputs. Name: Use v-validate to direct. And there are the following rules: required|alpha & displays validation errors. errors.has('name') is true. and v-show to display validation errors errors.first('name') .

Similarly for the input below we have used v-validate but the following rule: email, checkuser, min: 6, confirmed: password …

In addition, we have a button that can be used to submit the form. We first declare the form in the markup and notice: @submit.prevent="processForm". This prevents the form from refreshing or performing any other action when clicking this button instead of the form defined in @submit.prevent="processForm" . In the Vue method. Also, note that in the button, we have a little condition for the button’s :disabled="errors.any()" . The errors.any() is a method that VeeValidate exposes to verify that all of the validations have been passed. Next we will add css to make it look better.

Above are some CSS styles to make our page look great. Don’t forget to add your bootstrap css and tag:

Vue Component

Now let’s see what our Vue Component will look like. Replace the script section where we have Vue.use (VeeValidate) with:

The code block is quite similar. First we see the custom rule we created earlier, extending it to submission. Confirm the default and attach our Vue version. Let’s move on to the methods section and see what we have in our proessForm method. Here, we call the $validator.validate ALL() , which is a method exposed by VeeValidate, which tries to validate all inputs and then returns an authentication. Check if the authentication was successful or not and give a warning.

You can see the demo here:

https://codepen.io/samuelayo/pen/pdqvxB

Conclusion

In this article, we have looked at how to validate sample input using the pattern-driven method. VeeValidate made form input validation very simple by displaying a v-validate directive as well as adding extensions.

My post is here to see you again in the next post 🙂 References:

https://logaretm.github.io/vee-validate/

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

https://scotch.io/tutorials/template-driven-form-validation-in-vuejs


Chia sẻ bài viết ngay

Nguồn bài viết : Viblo