vue中的vee-validate3表单验证

1. 查看应用效果图

2. 使用步骤

2.1 下载插件 npm i vee-validate

2.2 引入注册使用

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

<Form ref="target" :validation-schema="schema" v-slot="{ errors }">
 <Field
   type="text"
   placeholder="请输入用户名"
   name="account"
   v-model="formData.account"
   :class="{ error: errors.account }"
 />
  <div class="error" v-if="errors.account">
    <i class="iconfont icon-warning" />{{ errors.account }}
  </div>
</Form> 

setup(){
    // 表单校验的基础内容
    const formData = reactive({
      account: 'single', // 用户名
      password: '123456', // 密码
    })
    // 校验规则
    const schema = {
      account: validateForm.account,
      mobile: validateForm.mobile,
      password: validateForm.password,
      code: validateForm.code,
      isAgree: validateForm.isAgree
    }
    // 兜底校验
    const target = ref(null)
    const checkForm = () => {
      // Form 组件提供了一个 validate 函数作为整体表单校验，返回的是一个promise
      target.value.validate().then((res) => {
        // console.log('表单校验结果', res)
        if (res) {
          // 做提交动作(校验通过)// 短信登录// 手机号登录
          isMsgLogin.value ? doUserMobielLogin() : doUserAccountLogin()
        }
      })
    }
  return{ target, formData, schema }  
}    

3. 所需要注意的

使用时需要注意：

form标签要套在所需要校验的field标签外面，并且要有相应的:validation-schema="schema"

schema为所需要的校验规则

Field标签要有对应的v-model和name，不写或漏写会报错

在Field标签的外面或同级别位置可以放置错误提示信息，错误信息的error为form标签中设置的error信息

这里的校验信息是封装在其他文件中的 使用时需要引入，如下：

文件名：validateForm.js

export default {
  // 以校验的属性命名
  mobile (value) {
    if (!value) return '请输入手机号'
    if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
    return true
  },
  account (value) {
    // return true通过；return '说明'不通过
    if (!value) return '用户名不能为空'
    return true
  },
  password (value) {
    if (!value) return '请输入密码'
    if (!/\d{6}$/.test(value)) return '密码格式错误'
    return true
  },
  rePassword (value, { form }) {
    if (!value) return '请输入密码'
    if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
    // 校验密码是否一致  form表单数据对象
    if (value !== form.password) return '两次输入的密码不一致'
    return true
  },
  code (value) {
    if (!value) return '请输入手机验证码'
    if (!/\d{6}$/.test(value)) return '验证码格式错误'
    return true
  },
  isAgree (value) {
    return value || '不答应可不行'
  }
}