本页导航
article
正则校验
AI摘要
本文介绍了一个名为regular-plus的正则校验库,详细说明了其安装、使用方法及支持的多种校验类型。库内置了丰富的正则表达式用于校验邮箱、URL、日期、身份证号等多种格式,同时支持自定义和扩展文件类型及其扩展名。通过示例展示了如何在Vue和Element Plus环境中集成上传文件的类型校验,提升文件上传的安全性和用户体验。该库适合需要多样格式验证和灵活扩展的前端开发场景。
安装
使用
正则校验
import regular from 'regular-plus';
console.log(regular.email.test('someemail@gmail.com')) // outputs true
可用校验
email: RegExp; // 邮箱地址
url: RegExp; // URL地址
domain: RegExp; // 域名
ipv4: RegExp; // IPv4地址
creditCard: RegExp; // 信用卡号
slug: RegExp; // 全部由小写字母(a-z)、数字(0-9)、或 - 构成且不能有空格、下划线、大写字母、中文、特殊符号等
number: RegExp; // 正整数数字字符串
html: RegExp; // HTML标签匹配,
phone: RegExp; // 手机号码
sfzReg: RegExp; // 身份证号码
hexcolor: RegExp; // 十六进制颜色
date: RegExp; // 日期格式 YYYY-MM-DD
dateReg: RegExp; // 日期时间格式 YYYY-MM-DD HH:mm:ss
int: RegExp; // 整数
float: RegExp; // 浮点数
post: RegExp; // 邮政编码
qqReg: RegExp; // QQ号
wxReg: RegExp; // 微信号
carNoReg: RegExp; // 车牌号
password: RegExp; // 密码,至少8位,包含大小写字母和数字
fileExt: RegExp; // 文件拓展名的校验
自定义文件扩展名校验
默认可用类型
type FileType = 'image' | 'doc' | 'archive';
const fileTypeExtMap: Record<FileType, string[]> = {
image: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'],
doc: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md'],
archive: ['zip', 'rar'],
};
扩展 FileType
可以通过 TypeScript 的联合类型扩展 FileType
import type { FileType } from 'regular-plus';
type MyFileType = FileType | 'video' | 'audio';
扩展 fileTypeExtMap
可以通过对象合并扩展 fileTypeExtMap
import { fileTypeExtMap } from 'your-npm-package';
const myFileTypeExtMap = {
...fileTypeExtMap,
video: ['mp4', 'avi', 'mov'],
audio: ['mp3', 'wav'],
};
Vue + Element Plus 上传校验集成示例
<template>
<el-upload :before-upload="beforeUpload">
<el-button>上传文件</el-button>
</el-upload>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import type { FileType } from 'regular-plus';
import { isAllowedFileType, getAllowedExtensions, fileTypeExtMap } from "regular-plus"
const allowedTypes: MyFileType[] = ['image', 'doc'];
function beforeUpload(file: File): boolean {
if (!isAllowedFileType(file.name, allowedTypes, myFileTypeExtMap)) {
const extText = getAllowedExtensions(allowedTypes, myFileTypeExtMap).join(', ');
ElMessage.error(`只允许上传以下类型的文件:${extText}`);
return false;
}
return true;
}
</script>
最后更新于 2025-10-02 15:34