如何实现HTML表单提交后拼接输入值重定向到指定子页面

原生表单默认提交逻辑无法直接生成/variant/[第一个输入值]-[第二个输入值]的路径格式，你原有代码还存在一处语法错误：第二个文本输入框的name属性漏写了等于号。通过JS拦截表单提交事件、手动拼接跳转地址即可实现需求，代码如下：

<form id="redirectForm">
  <input type="text" name="first" placeholder="输入第一个值" required>
  <input type="text" name="second" placeholder="输入第二个值" required>
  <button type="submit">提交</button>
</form>

<script>
const form = document.getElementById('redirectForm');
form.addEventListener('submit', (e) => {
  // 阻止表单默认提交行为
  e.preventDefault();
  // 获取输入值，去除首尾空白
  const val1 = form.first.value.trim();
  const val2 = form.second.value.trim();
  // 过滤非法路径字符，避免路径错乱、路径遍历风险
  const cleanVal = (str) => str.replace(/[\/\\\?\#\s]/g, '');
  // 拼接目标路径并跳转
  location.href = `/variant/${cleanVal(val1)}-${cleanVal(val2)}`;
})
</script>

补充说明 #

• 输入框添加了required属性做基础非空校验，避免用户提交空内容
• 字符过滤逻辑会自动清除输入内容里的斜杠、问号、井号、空格等会破坏URL结构的字符，确保跳转路径符合预期
• 提交red、green两个测试值时，会准确跳转到/variant/red-green路径，完全匹配需求

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