基于jQuery实现输入站点名跳转至子域名演示站的技术求助

嘿，我完全懂你现在的需求——用户输入站点名，页面自动跳转到匹配的演示子域名对吧？这事儿用jQuery其实很容易实现，我给你写个完整的方案，连验证细节都帮你考虑到了，直接拿去用就行：

第一步：搭好表单的HTML结构 #

你可以用这个基础结构，也能根据现有页面调整样式和布局：

<form id="demoRedirectForm" class="demo-form">
  <label for="siteName">请输入站点名称:</label>
  <input type="text" id="siteName" name="siteName" placeholder="例如：my-store" required>
  <button type="submit">前往演示站点</button>
</form>

第二步：编写jQuery跳转逻辑 #

这段代码会处理表单提交、验证输入、构造合法的子域名URL并完成跳转，注释写得很清楚，你一看就懂：

$(document).ready(function() {
  // 监听表单提交事件
  $('#demoRedirectForm').on('submit', function(event) {
    // 阻止表单默认的刷新提交行为
    event.preventDefault();
    
    // 获取用户输入的站点名，先去掉前后多余空格
    const inputSiteName = $('#siteName').val().trim();
    
    // 1. 验证输入是否为空
    if (!inputSiteName) {
      alert('请输入有效的站点名称哦！');
      $('#siteName').focus(); // 让输入框重新获得焦点，方便用户输入
      return;
    }
    
    // 2. 过滤子域名不允许的非法字符（子域名仅支持字母、数字、连字符）
    const validSiteName = inputSiteName.replace(/[^a-zA-Z0-9-]/g, '');
    
    // 3. 可选：更严格的格式验证（避免不符合域名规则的输入）
    const domainRules = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]$/;
    if (!domainRules.test(validSiteName)) {
      alert('站点名称格式不对哦！请使用3-63位的字母、数字或连字符，且不能以连字符开头/结尾~');
      $('#siteName').focus();
      return;
    }
    
    // 4. 构造演示子域名的URL，记得把`your-main-domain.com`换成你实际的主域名
    const demoUrl = `https://${validSiteName}.your-main-domain.com`;
    
    // 5. 跳转到演示站点
    window.location.href = demoUrl;
  });
});

额外小提示 #

• 务必替换代码里的your-main-domain.com为你真实的演示主域名，比如如果你的演示站都是xxx.demo-example.com，就改成demo-example.com
• 如果不需要太严格的格式验证，可以删掉第3步的代码，只保留空输入和非法字符过滤即可
• 要是想让提示更友好（不用系统alert），可以把alert换成你页面内的提示元素逻辑，比如$('.error-tip').text('请输入站点名称').show()

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