如何实现表单含指定URL格式时告警并阻止提交，允许其他内容通过？

当然可以实现！这种表单输入校验的需求在前端开发里挺常见的，咱们可以通过JavaScript监听表单提交事件配合正则表达式匹配URL模式来完成，刚好能覆盖你提到的几种要拦截的格式。

完整实现代码 #

1. HTML表单结构 #

先搭一个基础的表单框架：

<form id="url-block-form">
  <label for="input-content">输入内容:</label>
  <input type="text" id="input-content" name="content" placeholder="请输入内容...">
  <button type="submit">提交表单</button>
</form>

2. JavaScript校验逻辑 #

核心是监听表单的submit事件，用正则匹配输入中的URL类内容，匹配到就阻止提交并给出提示：

const form = document.getElementById('url-block-form');
const inputField = document.getElementById('input-content');

// 匹配目标URL格式的正则表达式，覆盖你提到的所有情况
const urlMatchPattern = /(https?:\s*\/?\/?|www\s*\.)?\b[a-zA-Z0-9-]+\.[a-zA-Z]{2,}\b/gi;
// 正则说明：
// - (https?:\s*\/?\/?|www\s*\.)? 匹配可选的http/https前缀（支持空格分隔，比如"https //"）、www前缀（支持空格分隔，比如"www domain"）
// - \b[a-zA-Z0-9-]+\.[a-zA-Z]{2,}\b 匹配纯域名（比如domain.com、test-co.uk这类带连字符的域名）

form.addEventListener('submit', function(e) {
  const inputValue = inputField.value.trim();
  
  // 检查输入是否包含URL格式内容
  if (urlMatchPattern.test(inputValue)) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 弹出告警提示
    alert('输入内容包含URL类格式，请修改后再提交！');
    // 给输入框添加视觉提示（可选）
    inputField.style.border = '2px solid #dc3545';
  } else {
    // 恢复输入框默认样式
    inputField.style.border = '';
  }
});

关键细节提醒 #

• 正则适配性：这个正则已经覆盖了你列出的所有要拦截的格式：https //domain.com/...、www domain.com//、domain.com，同时也能匹配常规的URL比如https://example.com、www.test.net等。
• 前端校验的局限性：前端校验只是给用户的即时反馈，一定要在后端也做相同的校验逻辑！因为用户可以通过修改前端代码、直接发送请求等方式绕过前端拦截，后端必须再次验证输入内容，确保数据安全。
• 自定义调整：如果需要拦截更多特殊格式（比如带端口的域名、非.com后缀的小众域名），可以调整正则表达式的规则，比如把[a-zA-Z]{2,}改成[a-zA-Z0-9]{2,}来支持数字后缀的域名。

内容的提问来源于stack exchange，提问作者Andrew Jerrard ClerssSound