超实用的前端校验工具类：validate.ts 全解析

超实用的前端验证工具类：validate.ts 全解析

一、引言

在前端开发中，数据验证是至关重要的一环。无论是用户注册、登录，还是日常表单提交，准确无误的输入数据才能保证系统的稳定运行。今天就来深入剖析一个前端工具类 validate.ts，它涵盖了众多实用的验证方法，助你轻松应对各种数据校验场景。

二、工具类概览

validate.ts 提供了一系列简洁高效的验证函数，从基础的字符串格式判断，到复杂的特定格式识别，应有尽有。这些函数统一导出，方便在项目各处按需引入，大大提升开发效率。

三、核心函数详解

1. isExternal

export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

此函数用于判断给定路径是否为外链。通过正则表达式匹配常见的外链协议头，如 https:、mailto:、tel:，只要路径以这些开头，就判定为外链。在处理页面导航链接，防止用户误点到外部链接或者需要区分内部资源和外部资源的场景中非常实用。

2. isPassword

export function isPassword(value) {
  return value.length >= 6;
}

该函数简单直接地校验密码长度是否大于等于 6 位。在用户注册或修改密码的场景中，使用这个函数可以确保用户设置的密码具备一定强度，满足基本的安全要求，是密码验证的基础步骤。

3. isNumber

export function isNumber(value) {
  const reg = /^[0-9]*$/;
  return reg.test(value);
}

利用正则表达式 /^[0-9]*$/ 精准判断输入值是否仅由数字组成。常用于数字输入框的校验，比如商品数量输入、年龄输入等场景，确保用户输入的是符合要求的数字内容。

4. isName

export function isName(value) {
  const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
  return reg.test(value);
}

该函数能验证输入是否符合名称规范。正则表达式 ^[\u4e00-\u9fa5a-zA-Z0-9]+$ 表示字符串可以由中文（\u4e00-\u9fa5 表示 Unicode 编码中的中文字符范围）、英文字母与数字组合而成。适用于用户名、产品名、店铺名等名称类输入的校验，确保名称的合法性和规范性。

5. isIP

export function isIP(ip) {
  const reg =
    /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
  return reg.test(ip);
}

此函数用于判断输入的字符串是否为合法的 IP 地址。正则表达式详细地匹配了 IP 地址每个部分的数字范围，即每个部分可以是 0 到 255 之间的数字，以点号分隔。在网络相关的前端功能中，如配置服务器地址等场景，可用来验证用户输入的 IP 地址是否正确。

6. isUrl

export function isUrl(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return reg.test(url);
}

该函数通过复杂的正则表达式判断输入的字符串是否为合法的网站 URL。它涵盖了常见的协议（https? 和 ftp）、域名格式、端口号以及路径等部分的验证。在处理用户输入的网址，或者需要判断链接是否有效的场景中非常有用。

7. isLowerCase

export function isLowerCase(value) {
  const reg = /^[a-z]+$/;
  return reg.test(value);
}

利用正则表达式 /^[a-z]+$/ 判断输入的字符串是否全部由小写字母组成。在一些对大小写有严格要求的输入场景，如密码区分大小写的校验中，可用于验证小写字母部分的输入。

8. isUpperCase

export function isUpperCase(value) {
  const reg = /^[A-Z]+$/;
  return reg.test(value);
}

与 isLowerCase 类似，该函数使用正则表达式 /^[A-Z]+$/ 判断输入的字符串是否全部由大写字母组成，适用于需要验证大写字母输入的场景。

9. isAlphabets

export function isAlphabets(value) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(value);
}

此函数通过正则表达式 /^[A-Za-z]+$/ 判断输入的字符串是否仅由英文字母（大小写均可）组成。可用于用户名、标识符等只能包含英文字母的输入校验。

10. isString

export function isString(value) {
  return typeof value === "string" || value instanceof String;
}

该函数用于判断输入的值是否为字符串类型。通过 typeof 操作符和 instanceof 关键字，分别检查值是否为基本类型的字符串或者 String 对象实例，是进行数据类型验证的基础函数。

11. isArray

export function isArray(arg) {
  if (typeof Array.isArray === "undefined") {
    return Object.prototype.toString.call(arg) === "[object Array]";
  }
  return Array.isArray(arg);
}

这个函数用于判断输入的参数是否为数组。首先检查环境中是否定义了 Array.isArray 方法，如果未定义，则使用 Object.prototype.toString.call 方法来判断对象的类型是否为数组；如果定义了，则直接使用 Array.isArray 方法进行判断。在处理数据结构时，可用来确保数据是数组类型。

12. isPort

export function isPort(value) {
  const reg =
    /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
  return reg.test(value);
}

该函数通过正则表达式判断输入的字符串是否为合法的端口号。端口号的范围是 0 到 65535，正则表达式精确匹配了这个范围内的数字格式。在配置网络连接的端口号等场景中，可用于验证用户输入的端口号是否正确。

13. isPhone

export function isPhone(value) {
  const reg = /^1\d{10}$/;
  return reg.test(value);
}

此函数利用正则表达式 /^1\d{10}$/ 判断输入的字符串是否为合法的手机号码。以 1 开头，后面跟随 10 位数字，符合中国大陆手机号码的格式规范。在用户注册、登录等需要填写手机号码的场景中，可用于验证号码的有效性。

14. isIdCard

export function isIdCard(value) {
  const reg =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  return reg.test(value);
}

该函数通过复杂的正则表达式判断输入的字符串是否为合法的第二代身份证号码。正则表达式涵盖了身份证号码的各个部分，包括地区码、出生日期码、顺序码和校验码等。在需要验证用户身份证号码的场景中，如实名认证等，可确保输入的号码符合规范。

15. isEmail

export function isEmail(value) {
  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  return reg.test(value);
}

利用正则表达式 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 判断输入的字符串是否为合法的电子邮件地址。它验证了邮箱地址的用户名部分、域名部分以及域名后缀等关键部分的格式。在用户注册、找回密码等需要填写邮箱地址的场景中，可用于验证邮箱的有效性。

16. isChina

export function isChina(value) {
  const reg = /^[\u4E00-\u9FA5]{2,4}$/;
  return reg.test(value);
}

该函数通过正则表达式 ^[\u4E00-\u9FA5]{2,4}$ 判断输入的字符串是否为 2 到 4 个中文字符。可用于一些特定的中文输入校验场景，如姓名中的中文部分、地址中的中文描述等。

17. isBlank

export function isBlank(value) {
  const result =
    value == null ||
    value === "null" ||
    value === undefined ||
    value === "undefined" ||
    typeof value === "undefined" ||
    value === "" ||
    JSON.stringify(value) === "{}" ||
    JSON.stringify(value) === "[]";
  if (result && (value !== 0 || value !== "0")) {
    return result;
  }
  return false;
}

此函数用于判断输入的值是否为空。它综合考虑了多种情况，包括 null、undefined、空字符串、空对象和空数组等，并排除了值为 0 或字符串 “0” 的情况。在处理表单输入，需要检查用户是否填写了必要信息的场景中非常有用。

18. isTel

export function isTel(value) {
  const reg =
    /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-4]{1,4}))?$/;
  return reg.test(value);
}

该函数通过正则表达式判断输入的字符串是否为合法的固定电话号码。正则表达式涵盖了常见的 400、800 开头的客服电话，以及一般的固定电话格式，包括区号、号码和分机号等部分的验证。在需要验证用户输入的固定电话的场景中，可确保号码格式正确。

19. isNum

export function isNum(value) {
  const reg = /^\d+(\.\d{1,2})?$/;
  return reg.test(value);
}

利用正则表达式 /^\d+(\.\d{1,2})?$/ 判断输入的字符串是否为数字且最多包含两位小数。可用于价格输入、百分比输入等需要控制小数位数的场景，确保输入的数字格式符合要求。

20. isLongitude

export function isLongitude(value) {
  const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/;
  return reg.test(value);
}

此函数通过正则表达式判断输入的字符串是否为合法的经度值。经度范围是 -180.0 到 +180.0，正则表达式精确匹配了整数部分为 0 到 180，且必须包含 1 到 5 位小数的格式。在涉及地图相关的前端开发，如坐标输入等场景中，可用于验证经度值的有效性。

21. isLatitude

export function isLatitude(value) {
  const reg = /^[-|+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/;
  return reg.test(value);
}

该函数通过正则表达式判断输入的字符串是否为合法的纬度值。纬度范围是 -90.0 到 +90.0，正则表达式匹配了整数部分为 0 到 90，且必须包含 1 到 5 位小数的格式。在地图相关的场景中，可用于验证纬度值的正确性。

22. isRTSP

export function isRTSP(value) {
  const reg =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
  const reg1 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/;
  const reg2 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//;
  return reg.test(value) || reg1.test(value) || reg2.test(value);
}

此函数通过三个正则表达式判断输入的字符串是否为合法的 RTSP 地址。RTSP（实时流协议）地址在视频监控、流媒体播放等场景中常用，这三个正则表达式分别匹配了不同格式的 RTSP 地址，确保输入的地址符合规范。

四、使用示例

import {
  isExternal,
  isPassword,
  // 按需引入其他函数
} from './validate';

const path = 'https://example.com';
console.log(isExternal(path)); // true

const password = 'abcdef';
console.log(isPassword(password)); // true

五、总结

validate.ts 工具类凭借其丰富且全面的验证函数，为前端开发中的数据验证工作提供了强大的支持。每个函数都针对特定的数据格式进行了精准的校验，无论是基础的数据类型判断，还是复杂的特定格式识别，都能轻松应对。熟练掌握并运用这个工具类，不仅能提升前端数据的质量和安全性，还能大大提高开发效率，减少后端处理无效数据的负担。希望本文的详细解析能帮助你更好地理解和使用这些验证函数，在前端开发中发挥出它们的最大价值。