MVC表单提交前如何用JS/jQuery检查textarea内容是否为iframe？

当然可行！我之前做过类似的视频嵌入校验需求，给你分享几个实用的实现思路和关键注意事项：

• 基础正则校验：快速判断是否为iframe
  最直接的方式是用正则表达式匹配textarea中的内容是否包含完整的<iframe>标签。考虑到用户可能输入大小写混合、带换行或多余空格的代码，我们可以写一个宽松但有效的正则：

  下面是jQuery的实现示例：

  // 监听表单提交事件
  $('#videoEmbedForm').submit(function(e) {
    const embedCode = $('#embedTextarea').val().trim();
    // 匹配完整iframe标签的正则，忽略大小写
    const iframePattern = /<iframe[^>]*>.*<\/iframe>/i;
  
    if (!iframePattern.test(embedCode)) {
      e.preventDefault(); // 阻止表单提交
      alert('请输入有效的iframe视频嵌入代码！');
      return false;
    }
  });
  

  这个正则会匹配以<iframe开头、包含任意属性、最终闭合的标签，能覆盖绝大多数合法的视频嵌入代码。

• 进阶校验：限制仅允许YouTube/Vimeo
  如果需要更严格的控制，只允许指定平台的iframe，可以针对嵌入链接的域名做校验：

  $('#videoEmbedForm').submit(function(e) {
    const embedCode = $('#embedTextarea').val().trim();
    const iframePattern = /<iframe[^>]*>.*<\/iframe>/i;
    const allowedDomains = ['youtube.com', 'youtu.be', 'vimeo.com'];
    
    if (!iframePattern.test(embedCode)) {
      e.preventDefault();
      alert('请输入有效的iframe视频嵌入代码！');
      return false;
    }
  
    // 提取iframe的src属性值
    const srcMatch = embedCode.match(/src=["'](https?:\/\/[^"']+)["']/i);
    if (srcMatch) {
      try {
        const srcUrl = new URL(srcMatch[1]);
        const isAllowed = allowedDomains.some(domain => srcUrl.host.includes(domain));
        if (!isAllowed) {
          e.preventDefault();
          alert('仅支持YouTube或Vimeo的视频嵌入代码！');
          return false;
        }
      } catch (err) {
        e.preventDefault();
        alert('嵌入链接格式无效，请检查！');
        return false;
      }
    }
  });
  

  这段代码不仅会检查是否为iframe，还会验证其来源域名是否在允许列表内，进一步提升安全性。

• 必须重视的安全与体验细节

  • 后端二次校验：前端校验只是给用户的即时反馈，绝对不能依赖前端做安全防护！用户可以轻易绕过前端校验提交恶意代码，所以后端必须再次过滤、校验iframe的域名和属性，移除onload、script等危险属性，防止XSS攻击。
  • 容错提示：用户可能会复制不完整的代码（比如只复制了开头的<iframe标签），或者输入多余的内容，提示语要清晰，告诉用户需要完整的平台嵌入代码。
  • 兼容性处理：如果需要兼容旧浏览器（比如IE），可以用字符串截取的方式判断域名，替代URL对象的使用。

内容的提问来源于stack exchange，提问作者Alp Arselan