1.安装

npm i vee-validate@4.0.3

2.导入

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

3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)

// 创建js文件进行导出
export default {
  // 校验项account
  account (value) {
    if (!value) return '不能为空'// 条件判断,
    return true // 最后全部通过必须return true
  },
  password (value) {
    if (!value) return '请输入密码'
    if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
    return true
  },
  mobile (value) {
    if (!value) return '请输入手机号'
    if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
    return true
  },
  code (value) {
    if (!value) return '请输入验证码'
    if (!/^\d{6}$/.test(value)) return '验证码是6个数字'
    return true
  },
  isAgree (value) {
    if (!value) return '请勾选同意用户协议'
    return true
  }
}

4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)

// validation-schema="mySchema"  配置校验规则
// v-slot：导出错误对象
<Form
  :validation-schema="mySchema"
  v-slot="{ errors }"
>
 <!-- 表单元素 -->
</Form>

<script>
  import schema from '@/utils/vee-validate-schema'
  setup () {
    // 表单对象数据
    const form = reactive({
      account: null, // 账号
      password: null // 密码
    })
    // 校验规则对象
    const mySchema = {
      account: schema.account,
      password: schema.password
    }
    return { form, mySchema }
 } 
</script>

5.使用 Field 组件，添加表单项目校验

//1. 把input改成 `Field` 组件，默认解析成input
//2. `Field` 添加name属性，作用是指定使用schema中哪个校验规则
//3. `Field`添加v-model，作用是提供表单数据的双向绑定
//4. 发生表单校验错误，显示错误类名`error`，提示红色边框

<Field
      v-model="form.account"
      name="account" 
      type="text"
      placeholder="请输入用户名"
      :class="{ error: errors.account }" // 如果返回错误信息,为true 显示类error
    />
    <!-- <input type="text" placeholder="请输入用户名" /> -->

6.补充表单数据和验证规则数据

// 表单绑定的数据
const form = reactive({
  account: null, // 账号
  password: null, // 密码
  isAgree: true // 是否选中
})

// 声明当前表单需要的校验数据规则
const curSchema = reactive({
  account: schema.account, // 账号
  password: schema.password, // 密码
  isAgree: schema.isAgree // 是否选中
})

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• js如何对字符出现次数进行统计？一文带你实现

  很多人比较好奇用javascript如何来统计字符的个数？这篇文章小编就给大家分享下用JavaScript统计字符串中字符出现的次数的代码，有需要或者感兴趣的朋友可以深入了解一下。

• vue中v-for指令怎么更新检测，具体过程是怎样

  v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。今天通过本文给大家介绍Vue中v-for更新检测的操作方法，感兴趣的朋友一起看看吧

• 用JS怎样写添加表格和删除功能，代码是什么

  这篇文章主要为大家详细介绍了js动态实现表格添加和删除操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用JavaScript怎样实现两张图片合成的功能?

  这篇文章主要介绍了JavaScript实现图片合成下载的示例，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下

• JS解构怎样理解？解构赋值的应用有哪些？

  本文介绍的JS解构的内容，什么是JS解构呢？ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，简单的了解完JS解构，接下来我们看数组解构、对象的解构赋值、字符串解构、解构赋值的应用等等。感兴趣的朋友就继续往下看吧。