项目源码

项目源码-Vue3项目12-表单校验Vuelidate

2025年1月14日
hangzi

Last Updated on 2025年1月14日 by hangzi

表单校验Vuelidate

1、安装依赖

pnpm add @vuelidate/core @vuelidate/validators

2、使用

src/views/login/index.vue登录页面例子：

index.vue中的内容：

<template>
  <h1>登录页</h1>

  <el-form :model="form" label-width="80px">
    <el-form-item>
      <template #label>
        <span>*</span> 用户名
      </template>
      <el-input v-model="form.username" @blur="v$.username.$touch" />
      <div class="error" >{{ v$.username.$errors[0]?.$message }}</div>
    </el-form-item>
    <el-form-item>
      <template #label>
        <span>*</span> 密码
      </template>
      <el-input v-model="form.password" @blur="v$.password.$touch"/>
      <div class="error">{{ v$.password.$errors[0]?.$message }}</div>
    </el-form-item>
    <el-button type="primary" @click="onSubmit" :disabled="v$.$invalid">登录</el-button>
  </el-form>

</template>

<script setup>

import { useVuelidate } from '@vuelidate/core'
import { required,helpers } from '@vuelidate/validators'

const form = reactive({
  username: '',
  password: ''
});

const rules = {
  username: { required: helpers.withMessage('用户名不能为空', required)},
  password: { required: helpers.withMessage('密码不能为空', required) }
}

const v$ = useVuelidate(rules, form)

function onSubmit() {
  console.log("登录")
}

</script>

<style lang="less" scoped>

.error {
  color: @error-color;
}
.el-form-item span {
  color: @error-color;
}

</style>

效果：

3、解释：

输入验证：<el-input>组件使用v-model指令绑定至form对象中的相应字段，并在@blur事件（失去焦点时）触发表单验证
实时错误消息展示: 在每个输入框下方，通过<div class="error">展示验证错误信息，利用Vuelidate提供的v$对象获取错误详情，条件性地展示第一条错误消息。
登录按钮：<el-button>组件作为提交按钮，:disabled属性根据v$.$invalid动态禁用按钮，当表单验证不通过时无法点击。
响应式数据绑定：使用reactive函数创建响应式form对象，包含username和password字段。
表单验证规则：rules对象定义了表单验证规则，利用required验证器确保用户名和密码非空，并通过helpers.withMessage提供自定义错误提示。
Vuelidate集成：引入useVuelidate函数初始化表单验证实例v$，传入验证规则和响应式数据对象。