表单校验实现 vue3---(vee-validate 插件)

最新推荐文章于 2025-02-17 09:31:14 发布

原创最新推荐文章于 2025-02-17 09:31:14 发布 · 2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #npm #vue.js

插件专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vee-validate插件进行表单验证。首先，通过npm安装指定版本的vee-validate，然后导入并注册Form和Field组件。接着，在src/utils文件夹下定义校验规则，并在组件中引用。在Form组件中配置校验规则和错误对象，使用v-slot导出错误信息。最后，通过Field组件实现表单项的校验，结合v-model和name属性实现数据绑定和错误提示，以及整体表单的validate方法进行提交时的校验。

安装插件和准备组件校验规则

1）安装校验插件 `vee-validate` -------------有些时候注意版本

      npm i vee-validate@4.5.7

2）导入校验组件并注册-----------那个表单验证就导入那个组件

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

components: {
  Form,
  Field
},

3）定义校验规则 `src/utils/vee-validate-schema.js`

一般应用的表单校验可能多个地方都需要使用，所以我们有必要把所有的规则集中管理起来

export default {
  // 校验account
  account (value) {
    if (!value) return '请输入用户名'
    return true
  },
  password (value) {
    if (!value) return '请输入密码'
    if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
    return true
  },
  isAgree (value) {
    if (!value) return '请勾选同意用户协议'
    return true
  }
}

定义表单和校验规则数据并使用

4）使用 Form 组件配置校验规则和错误对象

知识点： validation-schema : 配置校验规则

v-slot：导出错误对象=>错误提示信息

说明❓：使用Form组件元素替换类名为form的div元素

<Form
  class="form"
+  :validation-schema="mySchema"
+  v-slot="{ errors }"
  autocomplete="off"
>
 <!-- 表单元素 -->
</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`，提示红色边框并显示`errors`对象中的错误提示信息

账号校验：

<div class="form-item">
  <div class="input">
    <i class="iconfont icon-user"></i>
+    <Field
+      v-model="form.account"
+      name="account"
      type="text"
      placeholder="请输入用户名"
+     :class="{ error: errors.account }"
+    />
    <!-- <input type="text" 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
+      :class="{ error: errors.password }"
+      v-model="form.password"
+      name="password"
      type="password"
      placeholder="请输入密码"
    />
    <!-- <input type="password" placeholder="请输入密码" /> -->
  </div>
+  <div class="error" v-if="errors.password">
+    <i class="iconfont icon-warning" />{{ errors.password }}
+  </div>
</div>

表单提交整体校验

6）整体表单校验

实现步骤：1. 通过ref获得表单组件对象

2. 执行组件对象身上的validate方法（**执行完毕返回promise对象**）

<a @click="submit" href="javascript:;" class="btn">登 录</a>

setup(){
    const target = ref(null); //在form上绑定  ref="target"
    async submit () {
      // valid 返回true（通过校验）/false
      const valid = await target.value.validate()
      console.log(valid)
    }
}