vee-validate介绍 vue中表单验证组件

npm i vee-validate@4.0.3

//导入组件，注册为局部组件
import { Form, Field } from 'vee-validate'
components:{Form, Field}
<Form ref="target" :validation-schema="schema" v-slot="{errors}">
// ref 手动兜底校验时使用
// :validation-schema="schema" 兜底校验时对应的校验规则
// v-slot 作用域插槽 如果校验失败，errors中会保存校验失败的结果

      <Field v-model="formData.mobile" name="mobile" type="text" placeholder="请输入手机号" />
      <Field v-model="formData.password" name="password" type="password" placeholder="请输入密码" />
</Form>

//Form 就是表单， Field就是表单项
//定义验证规则
//整体用一个对象包起来，每条规则就是一个函数。具体格式如下：
//参数：参数1：是要验证的值，参数2：是验证对象{field, form}
//返回值：true表示通过验证，返回字符串表示校验错误。
const schema = {
  mobile (value) {
    if (!value) return '请输入手机号'
    if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
    return true
  },
  password (value) {
    if (!value) return '请输入密码'
    if (!/\d{6}$/.test(value)) return '密码格式错误'
    return true
  }
}

//还可以手动兜底校验
const target = ref(null) // 定义引用属性 <Form ref="target">
	const checkForm = () => {
      // Form 组件提供了一个 validate 函数作为整体表单校验，返回的是一个promise
      target.value.validate().then((res) => {
        console.log('表单校验结果', res)
      })
}