创想 H5 实现 APP 中的“输入短信验证码”效果

前端

2023-09-02 12:01:25

如何使用 HTML5 和 JavaScript 实现短信验证码功能

短信验证码的用途

在当今的移动互联网时代，手机已成为人们日常生活中不可或缺的工具。智能手机的普及带来了各种需要验证码来确保安全的应用场景，而短信验证码无疑是最常见的验证码类型之一。

短信验证码在 APP 中的应用

在 APP 中，短信验证码通常以“输入短信验证码”的形式出现。虽然看似简单，但其设计和实现却需要考虑诸多细节，包括输入框外观、验证码长度、验证码生成和显示方式，以及验证码验证。

HTML5 中实现短信验证码功能

使用 HTML5 和 JavaScript 可以轻松实现“输入短信验证码”功能，具体步骤如下：

创建输入框： 创建 6 个 input 元素作为验证码输入框。
设置样式： 为输入框设置统一的尺寸、颜色、边框等样式，与 APP 整体风格保持一致。
监听输入： 使用 JavaScript 监听输入框的输入事件，根据输入字符更新验证码。
验证验证码： 当用户提交验证码后，使用 JavaScript 验证验证码是否正确。
后续操作： 如果验证码验证通过，继续后续操作；否则，提示用户验证码错误。

示例代码

以下代码示例展示了如何使用 HTML5 和 JavaScript 实现“输入短信验证码”功能：

<div class="verification-code-container">
  <input type="text" maxlength="1" class="verification-code-input" />
  <input type="text" maxlength="1" class="verification-code-input" />
  <input type="text" maxlength="1" class="verification-code-input" />
  <input type="text" maxlength="1" class="verification-code-input" />
  <input type="text" maxlength="1" class="verification-code-input" />
  <input type="text" maxlength="1" class="verification-code-input" />
</div>

<script>
  const inputs = document.querySelectorAll('.verification-code-input');

  inputs.forEach((input) => {
    input.addEventListener('input', (event) => {
      const value = event.target.value;

      if (value.length > 0) {
        input.nextElementSibling.focus();
      }
    });
  });

  const submitButton = document.querySelector('.submit-button');

  submitButton.addEventListener('click', (event) => {
    const verificationCode = inputs.map((input) => input.value).join('');

    if (verificationCode === '123456') {
      alert('验证成功');
    } else {
      alert('验证失败');
    }
  });
</script>