Simple use of Vue vee-validate plugin

npm i [email protected]

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

// Create a js file for exportexport default {
  // Check item account  account (value) {
    if (!value) return 'Can't be empty'// Conditional judgment,    return true // Finally, all pass must be returned 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 mobile phone number'
    if (!/^1[3-9]\d{9}$/.test(value)) return 'Mobile phone number format error'
    return true
  },
  code (value) {
    if (!value) return 'Please enter the verification code'
    if (!/^\d{6}$/.test(value)) return 'The verification code is 6 numbers'
    return true
  },
  isAgree (value) {
    if (!value) return 'Please check to agree to the user agreement'
    return true
  }
}

// validation-schema="mySchema" configures verification rules// v-slot: Export the 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    })
    // Verify rule object    const mySchema = {
      account: ,
      password: 
    }
    return { form, mySchema }
 } 
</script>

//1. Change input to `Field` component and parse it into input by default//2. `Field` adds the name attribute, which is used to specify which verification rule in the schema is used//3. `Field` adds v-model, which is used to provide two-way binding of form data//4. A form verification error occurred, the error class name `error` was displayed, and the red border was prompted
<Field
      v-model=""
      name="account" 
      type="text"
      placeholder="Please enter a username"
      :class="{ error:  }" // If the error message is returned, the class error is displayed as true    />
    <!-- <input type="text" placeholder="Please enter a username" /> -->

// Form bound dataconst form = reactive({
  account: null, // account  password: null, // password  isAgree: true // Whether to select})

// Declare the verification data rules required for the current formconst curSchema = reactive({
  account: , // account  password: , // password  isAgree:  // Whether to select})