如何用 JavaScript 实现密码输入验证与导航跳转功能-js教程-PHP中文网

如何用 JavaScript 实现密码输入验证与导航跳转功能

本文详解如何编写三个核心 javascript 函数：动态追加数字、删除末位字符、验证正确密码后跳转网页，并限制输入长度、高亮错误状态，打造安全可控的数字密码输入界面。

本文详解如何编写三个核心 javascript 函数：动态追加数字、删除末位字符、验证正确密码后跳转网页，并限制输入长度、高亮错误状态，打造安全可控的数字密码输入界面。

在构建交互式数字输入面板（如门禁码、设备解锁界面）时，需兼顾用户体验与逻辑严谨性。以下是一个完整、健壮且可直接运行的实现方案，涵盖输入控制、实时校验、视觉反馈与页面跳转四大关键能力。

✅ 核心功能实现说明

1. 数字追加函数 `myFunction(button)`

通过 onclick="myFunction(this)" 将按钮值动态拼接到文本框中：

function myFunction(button) {
  const input = document.getElementById("field2");
  // 防止超长输入：仅在未达上限时追加
  if (input.value.length <p>✅ <strong>优化点</strong>：将长度校验前置，避免无效点击后还需二次截断。</p><h4>2. 删除末位函数 <code>myFunction3()</code>
</h4><p>精准移除最后一个字符（非清空整个字段），并恢复默认样式：</p><pre class="brush:php;toolbar:false;">function myFunction3() {
  const input = document.getElementById("field2");
  input.value = input.value.slice(0, -1); // 安全删除末位
  input.style.color = ""; // 清除错误红色
}

⚠️ 注意：原答案中 input.value = "" 是清空全部，不符合“删除最后一个数”的需求；此处已修正为 slice(0, -1)，确保行为准确。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

3. 验证与跳转函数 `myFunction2()`

执行三重逻辑：长度限制 → 密码匹配 → 分支响应：

function myFunction2() {
  const input = document.getElementById("field2");
  const code = input.value;

  // 【1】长度校验（最大10位）
  if (code.length > 10) {
    alert("最大输入长度为10位，请重新输入");
    input.style.color = "red";
    return;
  }

  // 【2】密码校验（注意：字符串比较更安全，避免 Number("") → 0 的陷阱）
  if (code === "1101") {
    window.location.href = "https://www.google.com"; // 推荐使用 location.href 替代 open()，避免弹窗拦截
  } 
  // 【3】验证失败：标红 + 保留输入（便于用户修改）
  else {
    input.style.color = "red";
  }
}

? 关键提醒：

使用 code === "1101" 字符串严格相等，避免 Number("") === 0 或 Number("110a") === NaN 引发的隐式转换风险；
window.location.href 是前台跳转首选，window.open() 易被浏览器拦截且新开标签页体验割裂；
错误时保留输入内容而非清空，符合用户预期（可编辑修正）。

? 完整 HTML 结构建议（精简版）



  <style>
    .field2 { font-size: 18px; padding: 8px; width: 200px; }
    .calculator { width: 50px; height: 40px; margin: 2px; font-size: 16px; }
    .Back, .Enter { width: 60px; height: 40px; margin: 2px; font-size: 16px; }
  </style><p class="Header">Code:</p>
  <input type="text" id="field2" class="field2" readonly><br><br><div class="Tasten">
    <input class="calculator" type="button" value="1" onclick="myFunction(this)"><input class="calculator" type="button" value="2" onclick="myFunction(this)"><input class="calculator" type="button" value="3" onclick="myFunction(this)"><br><input class="calculator" type="button" value="4" onclick="myFunction(this)"><input class="calculator" type="button" value="5" onclick="myFunction(this)"><input class="calculator" type="button" value="6" onclick="myFunction(this)"><br><input class="calculator" type="button" value="7" onclick="myFunction(this)"><input class="calculator" type="button" value="8" onclick="myFunction(this)"><input class="calculator" type="button" value="9" onclick="myFunction(this)"><br><input class="calculator0" type="button" value="0" onclick="myFunction(this)">
</div>

  <input class="Back" type="button" value="←" onclick="myFunction3()"><input class="Enter" type="button" value="OK" onclick="myFunction2()"><script>
  // 此处插入上述三个函数定义
</script>