vue3——实现表单校验

---

前言

为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~

---

一、表单校验的意义

• 当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作
• 可以让用户的信息都按一定的规则来设置，方便统一管理
• 通过表单校验可以有效地规避不法分子进行危险输入

二、如何对表单进行校验？

这里使用一个专门做表单校验的第三方包，文档：vee-validate 支持vue3.0

1. 准备

在项目根目录下打开任意终端，执行命令：npm i vee-validate@4.0.3

2. 步骤

• 使用第三包提供的Form标签将表单整个区域包裹起来
• 使用第三方包提供的Filed标签将输入框的input替换掉
• 如果表单需要校验，那么必须有name属性
• 将校验规则通过rules绑定到需要校验的Field标签上
• 当用户输入的内容未通过验证规则时，错误信息是从Form标签上的插槽中解构出来的

3. 使用

在任意.vue结尾的文件中

这里用到了之前封装的按钮组件和消息提示组件，各位可以点击链接看一下是如何封装的

代码如下（示例）：

<template>
  <Form class="form" ref="target" v-slot="{ errors }">
    <div class="form-item">
      <div class="input">
        <i class="iconfont icon-user"></i>
        <Field autocomplete="off" type="text" name="account" :rules="checkAccount" placeholder="请输入用户名或手机号" />
      </div>
      <div