前言

为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下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 class="error" v-if="errors.account"><i class="iconfont icon-warning" />{{ errors.account }}</div>
    </div>

    <div class="form-item">
      <div class="input">
        <i class="iconfont icon-lock"></i>
        <Field type="password" v-model="form.password" name="password" :rules="checkPwd" placeholder="请输入密码" />
      </div>
      <div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{ errors.password }}</div>
    </div>
    <my-button type="plain" size="mini" @click="handleLogin" href="javascript:;" class="btn">登录</my-button>
  </Form>
</template>

<script>
import { Form, Field } from 'vee-validate'
import { ref, reactive, getCurrentInstance } from 'vue'

export default {
  name: 'App',
  components: { Field, Form },
  setup() {
    const instance = getCurrentInstance()
    const target = ref(null)
    // 表单数据
    const form = reactive({
      // 用户名
      account: null,
      // 密码
      password: null
    })

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

    // 密码验证规则
    const checkPwd = value => {
      if (!value) return '请输入密码'
      if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
      return true
    }

    // 点击登录
    const handleLogin = async () => {
      const valid = await target.value.validate()
      if (valid) {
        // 表单验证通过，调用接口实现登录
        // 以下为演示代码
        return instance.proxy.$message({ text: '验证通过', type: 'success' })
      }
    }
    return { target, form, checkAccount, checkPwd, handleLogin }
  }
}
</script>

<style scoped lang="less">
// 账号容器
* {
  box-sizing: border-box;
}
.form {
  margin: 100px auto;
  padding: 50px;
  width: 500px;
  border: 1px solid #ccc;
  &-item {
    margin-bottom: 28px;
    .input {
      position: relative;
      height: 40px;
      outline: none;
      > i {
        width: 35px;
        height: 35px;
        background: #cfcdcd;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 34px;
        font-size: 18px;
      }
      input {
        padding-left: 44px;
        border: 1px solid #cfcdcd;
        outline: none;
        height: 36px;
        line-height: 36px;
        width: 100%;
        &.error {
          border-color: #ff3040;
        }
        &.active,
        &:focus {
          border-color: skyblue;
        }
      }
    }
    > .error {
      position: absolute;
      font-size: 12px;
      line-height: 28px;
      color: #ff3040;
      i {
        font-size: 14px;
        margin-right: 2px;
      }
    }
  }
  .btn {
    float: right;
  }
}
</style>

注：以上为演示代码

校验规则较多的时候，可以将校验规则单独放入一个文件中管理，然后在需要使用的文件中导入使用即可
校验通过后需要进行的步骤，各位根据实际需求书写即可。

三、结果演示

在这里插入图片描述

总结

Rome was not built in a day.

vue3——实现表单校验功能

前言