Vue 3 中校验 URL 合法性最常用方式是结合正则表达式与 Element Plus 的 el-form 规则机制，推荐正则 /^((https?|ftp)://)?([\da-z.-]+)(.([a-z.]{2,6})|:\d{1,5})?(/[\w .])(?1)?$/i，支持无协议、中文域名等常见场景，并可配合自定义 validator 过滤危险协议。\s ↩
Vue 3 中校验 URL 链接合法性，最常用且可靠的方式是结合正则表达式 + Element Plus（或类似 UI 库）的 el-form 内置规则机制，或在自定义校验器中手动判断。关键不是“能不能用正则”，而是“正则是否覆盖常见合法 URL 场景”，同时兼顾空值、协议缺失、中文域名等边界情况。
URL 校验的正则写法（推荐实用版）
以下正则能覆盖绝大多数真实 URL 场景（含 http/https/ftp，支持端口、路径、查询参数、锚点，兼容常见中文域名）：
/^((https?|ftp):\/\/)?([\da-z.-]+)(\.([a-z.]{2,6})|:\d{1,5})?([\/\w .])*(\?[^\s]*)?$/i
- 开头
(https?|ftp):\/\/可选，允许用户输example.com或www.baidu.com也算合法（业务可按需调整是否强制协议） -
[\da-z.-]+匹配域名主体（支持数字、字母、短横线、点） -
\.([a-z.]{2,6})匹配顶级域（如 .com、.org、.co.uk、.在线） -
(\?[^\s]*)?允许带查询参数，且不匹配空格 -
/i忽略大小写，适配大写协议如 HTTP://
Element Plus 中集成 URL 校验规则
在 :rules 中直接使用 pattern，简洁高效：
立即学习“前端免费学习笔记（深入）”；
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
url: [{ pattern: /^((https?|ftp):\/\/)?([\da-z.-]+)(\.([a-z.]{2,6})|:\d{1,5})?([\/\w .])*(\?[^\s]*)?$/i, message: '请输入合法的网址', trigger: 'blur' }]
- 无需额外函数，适合基础 URL 格式检查
-
trigger: 'blur'表示失焦时校验，避免输入中途误报 - 若要求必须带协议（如强制 https://），去掉开头的
?)并把(https?:\/\/)改为https?:\/\/
需要更严格校验？用自定义 validator
比如：拒绝 IP 形式地址、过滤危险协议（javascript:、data:）、验证能否被浏览器解析（非真正请求）：
const validateUrl = (_rule: any, value: string, callback: Function) => {
if (!value) return callback(); // 空值不报错（可改为 required:true 单独控制）
const urlRegex = /^((https?|ftp):\/\/)[^\s/$.?#].[^\s]*$/i;
if (!urlRegex.test(value)) return callback(new Error('URL 格式不正确'));
if (/^(javascript|data|vbscript):/i.test(value)) return callback(new Error('不支持危险协议'));
callback();
};
- 先用正则筛基本结构，再黑名单过滤协议，逻辑清晰可控
- 返回
callback()表示通过；传new Error(...)表示失败 - 可用于
rules.url = [{ validator: validateUrl, trigger: 'blur' }]
补充：简单场景也可用原生 URL 构造函数
如果项目不依赖 UI 框架，或想最小化正则维护，可用 JS 原生方式快速验证（但对无协议 URL 如 example.com 会报错）：
try { new URL(value); callback(); } catch { callback(new Error('无效的 URL')); }
- 优点：语义明确、无需记忆正则、自动识别协议和编码
- 缺点：不支持无协议域名（需前置补
https://再试），部分老浏览器不兼容 - 适合后台管理类系统，对输入格式要求较规范的场景
