Vue 3 中表单校验怎么校验 URL 链接的合法性-Vue.js-PHP中文网

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 链接的合法性

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，简洁高效：

url: [{ pattern: /^((https?|ftp):\/\/)?([\da-z.-]+)(\.([a-z.]{2,6})|:\d{1,5})?([\/\w .])*(\?[^\s]*)?$/i, message: '请输入合法的网址', trigger: 'blur' }]

蓝湖代码转vue2.0+element-ui

将静态 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 格式检查
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();
};