用户输入合法提交表单时错误提示仍显示，该如何修改现有代码？

AI 小北

2026-10-12

代码问题分析

你的代码核心逻辑顺序写反了，具体问题如下：

错误提示赋值时机错误：submit事件触发后第一行就直接给error-message容器写入了错误文案，不管用户输入是否合法，只要点击提交就会先展示错误
缺少合法输入下的错误清空逻辑：用户输入有效内容时，没有主动清空错误提示容器的内容，上一次提交残留的错误会一直展示
额外HTML小问题：<input type="submit">是单标签，不需要写</input>闭合

修正后的代码

HTML代码

<form id="url">
  <input type="text" name="urlName">
  <input type="submit" value="Build Your App">
</form>
<div id="error-message"></div>

JS代码

document.getElementById("url").addEventListener("submit", (event) => {
  event.preventDefault()
  // 先清空上一次的错误提示
  const errorDom = document.getElementById("error-message")
  errorDom.innerHTML = ""
  const myForm = document.getElementById("url")
  const formData = new FormData(myForm)
  const inputVal = formData.get("urlName")
  // 只有输入为空的时候才展示错误
  if (inputVal.trim() === "") {
    errorDom.innerHTML = "请提供你的商店URL"
    return
  }
  const EndOfUrl = sanitizeDomainInput(inputVal)
  const newUrl = redirectLink(EndOfUrl)
  window.location.href = newUrl
});

function sanitizeDomainInput(input) {
  input = input || 'unknown.com'
  if (input.startsWith('http://')) {
    input = input.substr(7)
  }
  if (input.startsWith('https://')) {
    input = input.substr(8)
  }
  const regexp = new RegExp(/^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/)
  return regexp.test(input) ? input : 'unknown.com';
}

function redirectLink(domain) {
  return `https://dashboard.getorda.com/signup/?state=${domain}`;
}

修正逻辑说明