Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to use the vee-validate plug-in in Vue", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use the vee-validate plug-in in Vue" can help you solve your doubts.

1. Install npm I vee-validate@4.0.32. Import import {Form, Field} from 'vee-validate'3. Define verification rules (preferably encapsulate js file export separately in utils folder) / / create js file for export export default {/ / check item account account (value) {if (! value) return 'cannot be empty' / / condition judgment, return true / / finally all pass must return true} Password (value) {if (! value) return 'Please enter the password' if (! / ^\ w {6value 24} $/ .test (value)) return 'password is 6-24 characters' return true}, mobile (value) {if (! test) return 'Please enter the cell phone number' if (! / ^ 1 [3-9]\ d {9} $/ .test (value)) return 'Mobile number is in the wrong format' return true}. Code (value) {if (! value) return 'Please enter the verification code' if (! / ^\ d {6} $/ .test (value)) return'is 6 digits' return true}, isAgree (value) {if (! value) return 'Please check agree to user agreement' return true}} 4. Use the Form component to configure verification rules and error objects (both form and Field are exported on demand from the plug-in) / / validation-schema= "mySchema" configuration verification rules / / v-slot: export error object import schema from'@ / utils/vee-validate-schema' setup () {/ / form object data const form = reactive ({account: null / / account password: null / / password}) / / Verification rule object const mySchema = {account: schema.account, password: schema.password} return {form, mySchema}} 5. Using the Field component, add a form item check / / 1. Change input to `Field` component, and by default parse to input//2. `Field` to add name attribute. The function is to specify which verification rule / / 3. `Field` to add v-model in schema, and to provide two-way binding of form data / / 4. A form verification error occurs, showing the error class name `error` and prompting a red border of 6. 0. Supplementary form data and validation rules data / / data bound by the form const form = reactive ({account: null, / / account password: null, / / password isAgree: true / / whether selected}) / / declare the verification data rules required by the current form const curSchema = reactive ({account: schema.account, / / account password: schema.password / / password isAgree: schema.isAgree / / check}) read here This article "how to use the vee-validate plug-in in Vue" has been introduced, and if you want to grasp the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about the article, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.