element-ui中表单验证validator统一封装

最新推荐文章于 2025-09-24 10:44:21 发布

原创

最新推荐文章于 2025-09-24 10:44:21 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #typescript #正则表达式

本文介绍了一种在项目中封装表单验证的方法，通过实例展示了如何使用 Vue 进行表单验证，包括非空检查、正则表达式验证等，并提供了一个手机号验证的具体实现。

在写业务代码时，会遇到各种需要对用户输入的数据进行校验的场景，最常见的就是表单验证，各种非空校验，正则校验等等

这里我就分享下在项目中是如何封装使用的

1. 属性介绍

参数	说明	类型	可选值	默认值
model	表单数据对象	object	—	—
rules	表单验证规则	object	—	—

2. 主组件index.vue

<template>
    <el-form ref="drawerRef" :model="formModel" :rules="drawerRule" class="drawer-form">
      <el-form-item label="姓名" prop="mobile">
        <el-input v-model.trim="formModel.mobile" size="small" maxlength="11" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
    </el-form>
    <div class="flex flex-center-center drawer-bottom">
      <el-button type="text" @click="cance