Simple use of Vue vee-validate plug-in

npm i [email protected]

import { Form, Field } from 'vee-validate'

// Create a js file for export export default {
  // Verify item account
  account(value) {
    if (!value) return 'cannot be empty' // conditional judgment,
    return true // Finally, all passed must return true
  },
  password (value) {
    if (!value) return 'Please enter your password'
    if (!/^\w{6,24}$/.test(value)) return 'The password is 6-24 characters'
    return true
  },
  mobile (value) {
    if (!value) return 'Please enter your phone number'
    if (!/^1[3-9]\d{9}$/.test(value)) return 'The phone number format is incorrect'
    return true
  },
  code (value) {
    if (!value) return 'Please enter the verification code'
    if (!/^\d{6}$/.test(value)) return 'The verification code is 6 digits'
    return true
  },
  isAgree (value) {
    if (!value) return 'Please check to agree to the user agreement'
    return true
  }
}

// validation-schema="mySchema" configures validation rules // v-slot: export error object <Form
  :validation-schema="mySchema"
  v-slot="{ errors }"
>
 <!-- Form elements -->
</Form>

<script>
  import schema from '@/utils/vee-validate-schema'
  setup () {
    // Form object data const form = reactive({
      account: null, // account password: null // password })
    // Validation rule object const mySchema = {
      account: schema.account,
      password: schema.password
    }
    return { form, mySchema }
 } 
</script>

//1. Change input to `Field` component, which is parsed as input by default
//2. `Field` adds the name attribute to specify which validation rule in the schema to use //3. `Field` adds v-model to provide two-way binding of form data //4. When a form validation error occurs, the error class name `error` is displayed, and a red border <Field is displayed
      v-model="form.account"
      name="account" 
      type="text"
      placeholder="Please enter your username"
      :class="{ error: errors.account }" // If an error message is returned, it is true to display the class error
    />
    <!-- <input type="text" placeholder="Please enter your username" /> -->

// Data bound to the form const form = reactive({
  account: null, // account password: null, // password isAgree: true // whether it is selected})

// Declare the validation data rules required for the current form const curSchema = reactive({
  account: schema.account, // account password: schema.password, // password isAgree: schema.isAgree // whether selected})