如何在 ReactJS 中验证手机号码长度？

在 ReactJS 中，我们经常需要校验用户输入的表单数据是否正确，其中比较常见的一种校验是手机号码的长度。本文将介绍如何在 ReactJS 中验证手机号码长度。

方案一：使用正则表达式

使用正则表达式可以方便地对手机号码进行验证。根据中国大陆手机号码规则，手机号码长度为11位，且以1开头。因此，我们可以使用下面的正则表达式对手机号码进行校验：

const phoneRegex = /^1\d{10}$/;

function validatePhone(phone) {
  return phoneRegex.test(phone);
}

上述代码中，我们定义了一个正则表达式 phoneRegex，它表示以1开头，后面跟着10个数字的字符串。然后，我们编写了一个函数 validatePhone，用于校验手机号码是否符合正则表达式定义的规则。该函数返回一个布尔值，表示校验结果。

在真实的 ReactJS 应用中，我们可以在表单中的手机号码输入框失去焦点的时候触发校验。例如：

import React, { useState } from 'react';

function PhoneForm() {
  const [phone, setPhone] = useState('');
  const [valid, setValid] = useState(false);

  function handlePhoneInput(event) {
    setPhone(event.target.value);
  }

  function handlePhoneBlur() {
    setValid(validatePhone(phone));
  }

  return (
    <div>
      <label htmlFor="phone-input">手机号码：</label>
      <input
        id="phone-input"
        type="tel"
        value={phone}
        onChange={handlePhoneInput}
        onBlur={handlePhoneBlur}
      />
      {valid ? <span style={{ color: 'green' }}>√</span> : null}
    </div>
  );
}

在上面的代码中，我们使用 useState 来声明了两个状态变量 phone 和 valid，分别用于保存手机号码和校验结果。在输入框的 onChange 事件中，我们监听了用户输入的内容，并更新了状态变量 phone 的值。在输入框的 onBlur 事件中，我们调用了 validatePhone 函数进行校验，然后更新了状态变量 valid 的值。最后，在组件的渲染结果中，根据校验结果来显示一个绿色的√符号。

方案二：使用第三方库

除了手动编写正则表达式外，我们还可以使用一些第三方库来验证手机号码的长度。例如，使用 validator 这个库可以很方便地对手机号码进行校验。我们可以按照下面的步骤来使用这个库：

1. 安装 validator：

npm install validator

2. 导入 validator：

import validator from 'validator';

3. 编写验证逻辑：

function validatePhone(phone) {
  return validator.isMobilePhone(phone, 'zh-CN');
}

在上面的代码中，我们调用了 validator.isMobilePhone 函数来进行校验。其中，第二个参数 "zh-CN" 指定了当前系统语言环境为中文，这样校验函数会按照中国大陆手机号码的规则进行校验。

在 ReactJS 组件中使用 validator 库来验证手机号码和手写正则表达式的代码逻辑是相似的，这里不再赘述。

总结

本文介绍了在 ReactJS 中验证手机号码长度的两种常用方法：使用正则表达式和使用第三方库。通过对两种方法的比较，我们可以发现，使用第三方库可以更方便地实现手机号码验证，而手写正则表达式则更加灵活、可定制化。在实际开发中，可以根据具体情况选择合适的方法。