如何实现输入内容包含admin时动态显示指定按钮？

现有一段前端脚本，原本的逻辑是检测输入框内容：

• 输入为空时弹出错误提示
• 输入内容包含"admin"时弹出"DONE"提示
• 其他情况弹出"未找到"提示

现在需要调整逻辑：当输入内容满足text.includes("admin")条件时，显示页面中原本隐藏的SUBMIT按钮，而不是弹出提示。现有代码如下：

function check() {
  var text = document.getElementById("wrd").value;

  if (text == "") {
    alert("Error: The url field is Empty.");
  } else if (text.includes("admin")) {
    alert("DONE");
  } else {
    alert("ERROR : This url was not found.");
  }
}

<form>
  <input id="wrd" class="wrd" type="text" autocomplete="off" placeholder="myword...">
  <button id="submit" class="submit" type="submit" onclick="check()" style="display:none;">SUBMIT</button>
</form>

只需要修改check()函数中对应条件的处理逻辑，替换弹出提示的代码为显示按钮的操作，同时补充按钮的隐藏逻辑，避免状态混乱。

修改后的完整代码 #

function check() {
  var text = document.getElementById("wrd").value;
  var submitBtn = document.getElementById("submit");

  if (text == "") {
    alert("Error: The url field is Empty.");
    submitBtn.style.display = "none"; // 空值时隐藏按钮
  } else if (text.includes("admin")) {
    submitBtn.style.display = "inline-block"; // 满足条件时显示按钮
  } else {
    alert("ERROR : This url was not found.");
    submitBtn.style.display = "none"; // 不满足条件时隐藏按钮
  }
  // 阻止表单默认提交行为，避免页面刷新
  return false;
}

<form>
  <input id="wrd" class="wrd" type="text" autocomplete="off" placeholder="myword...">
  <!-- 给onclick加上return，触发函数的返回值阻止提交 -->
  <button id="submit" class="submit" type="submit" onclick="return check()" style="display:none;">SUBMIT</button>
</form>

关键改动说明 #

1. 复用按钮DOM对象：提前获取submit按钮的DOM对象，避免重复调用getElementById，提升代码效率
2. 控制按钮显示状态：在对应条件分支中，通过修改style.display属性控制按钮的显示/隐藏（inline-block适合和输入框同行显示，也可以用block让按钮独占一行，根据布局需求调整）
3. 阻止表单默认提交：因为按钮是type="submit"，点击后会触发表单默认提交行为导致页面刷新，所以在函数末尾返回false，并在按钮的onclick中加上return check()，阻止默认行为

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