当前位置：首页 > 行业动态 > 正文

用JS实现手机号校验，确保用户输入手机号的正确性

admin
行业动态
2023-12-25
2456

手机号校验是Web开发中常见的需求，尤其是在用户注册、登录等场景中，为了确保用户输入的手机号正确性，我们需要对手机号进行格式校验和长度校验，本文将介绍如何使用JavaScript实现手机号校验功能，并提供详细的技术介绍和相关问题与解答。

用JS实现手机号校验，确保用户输入手机号的正确性第1张

手机号格式校验

1、1 什么是手机号格式？

手机号格式通常为11位数字，以1开头，第二位为3-9之间的数字，后面9位为任意数字，13800138000。

1、2 如何判断一个字符串是否符合手机号格式？

我们可以使用正则表达式来判断一个字符串是否符合手机号格式，正则表达式是一种用于匹配字符串的模式，它可以用来检查一个字符串是否符合某种规则。

function isPhoneNumber(str) {
  const reg = /^1[3-9]d{9}$/;
  return reg.test(str);
}

上述代码定义了一个名为isPhoneNumber的函数，该函数接受一个字符串参数str,并使用正则表达式reg对其进行匹配，如果匹配成功，返回true,否则返回false。

手机号长度校验

2、1 为什么需要进行手机号长度校验？

手机号长度不一致可能导致用户体验不佳，甚至影响系统正常运行，在进行手机号校验时，还需要对手机号的长度进行校验。

2、2 如何判断一个字符串的长度？

在JavaScript中，我们可以使用字符串的length属性来获取字符串的长度。

function isValidLength(str) {
  const reg = /^1[3-9]d{9}$/;
  return reg.test(str) && str.length === 11;
}

上述代码首先使用正则表达式对手机号进行格式校验，然后判断手机号的长度是否为11位，如果两个条件都满足，返回true,否则返回false。

实战示例

下面我们通过一个简单的示例来演示如何使用上述方法进行手机号校验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机号校验示例</title>
</head>
<body>
  <input type="text" id="phone" placeholder="请输入手机号">
  <button onclick="checkPhone()">校验</button>
  <p id="result"></p>
  <script>
    function isPhoneNumber(str) {
      const reg = /^1[3-9]d{9}$/;
      return reg.test(str);
    }
    function isValidLength(str) {
      const reg = /^1[3-9]d{9}$/;
      return reg.test(str) && str.length === 11;
    }
    function checkPhone() {
      const phone = document.getElementById('phone').value;
      const result = document.getElementById('result');
      if (isPhoneNumber(phone)) {
        if (isValidLength(phone)) {
          result.innerHTML = '手机号格式正确且长度正确';
        } else {
          result.innerHTML = '手机号格式正确，但长度不正确';
        }
      } else {
        result.innerHTML = '手机号格式错误';
      }
    }
  </script>
</body>
</html>

上述代码创建了一个简单的网页，包含一个输入框用于输入手机号，一个按钮用于触发校验操作，以及一个用于显示结果的段落元素，当用户点击“校验”按钮时，会调用checkPhone函数进行手机号校验，并将结果显示在段落元素中。