安装

使用

正则校验

      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>
    

声明

作者: liyao

版权:本博客所有文章除特别声明外,均采用CCBY-NC-SA4.O许可协议。转载请注明!

最后更新于 2025-10-02 15:34 history