vee-validate表单校验的使用方法

VeeValidate 是 Vue.js 表单验证框架。
VeeValidatehttps://vee-validate.logaretm.com/

第一步：安装

 npm i vee-validate@4.0.3

第二步：导入

// 导入组件
import { Form, Field } from 'vee-validate'

export default {
  name: 'LoginForm',
  components: {
    Form, Field
  }
}

第三步：使用 Form 组件

<Form class="form">
···
</Form>

第四步：使用 Field 组件，添加表单项目校验

<Form class="form">
    ···
    <!-- 将input元素替换为Field组件 -->
    <Field name="password" type="password" placeholder="请输入密码" />
</Form>

自定义组件替换方法 （自定义组件必须支持v-model方法）

<!-- <AppCheckbox v-model="form.isAgree" /> -->
<Field as="AppCheckbox" name="isAgree" v-model="form.isAgree"/>

定义 校验规则

// 定义校验规则提供给vee-validate组件使用
export default {
  // 校验account
  account (value) {
    // value是将来使用该规则的表单元素的值
    // 1. 必填
    // 2. 6-20个字符，需要以字母开头
    // 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
    if (!value) return '请输入用户名'
    if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
    return true
  }
}

在组件中使用定义好的规则

<script>
import { ref, reactive } from 'vue-demi'
import { Form, Field } from 'vee-validate'
// 导入验证规则对象
import veeSchema from '@/utils/vee-validate-schema'
export default {
  name: 'LoginForm',
  components: {
    Form, Field
  },
  setup () {
    ...

    // 表单对象数据
    const form = reactive({
      isAgree: true,
      account: null,
      password: null,
      mobile: null,
      code: null
    })
    // 校验规则对象 （属性名和Field 组件的name属性对应）
    const mySchema = {
      account: veeSchema.account,
      password: veeSchema.password,
      mobile: veeSchema.mobile,
      code: veeSchema.code,
      isAgree: veeSchema.isAgree
    }
    return {
      ...,
      form,
      mySchema
    }
  }
}
</script>

在Form组件中通过validation-schema 属性传递 校验规则对象

<Form class="form"  :validation-schema="mySchema" autocomplete="off">

其实就是把input改成 Field 组件，默认解析成input

Field 添加name属性，作用是指定使用schema中哪个校验规则

Form 添加 v-slot="{errors}" 使用作用域插槽暴露 errors 错误对象

<Form class="form"  :validation-schema="mySchema" autocomplete="off" v-slot="{errors}">

通过 errors['校验规则名称'] 取出错误信息，有则显示，无即隐藏

<Form class="form"  :validation-schema="mySchema" autocomplete="off" v-slot="{errors}">
    ···
    <!-- 将input元素替换为Field组件 -->
    <Field name="password" type="password" placeholder="请输入密码" />
    ...
    <!-- 错误提示 -->
    <div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{errors.password}}</div>
</Form>

组件提供了一个resetForm方法可以清除效验结果

<Form class="form" ref="formRef"  :validation-schema="mySchema" autocomplete="off" v-slot="{errors}">

...

// form表单元素
const formRef = ref(null)
// 使用Form 组件提供 resetForm 方法对表单进行清除校验结果
formRef.value.resetForm()

 

需要在点击登录的时候对整体表单进行校验

    // 登录按钮
    // 需要在点击登录的时候对整体表单进行校验
    const login = async () => {
      // Form组件提供了一个 validate 函数作为整体表单校验，当是返回的是一个promise
      const valid = await formRef.value.validate()
      console.log(valid)
    }