js怎么判断手机号已经输入过

JavaScript 判断手机号是否已经输入过的几种方法有：使用数组存储输入过的手机号、使用对象存储手机号、利用 LocalStorage 存储手机号。下面详细描述其中一种方法：使用数组存储输入过的手机号。

一、使用数组存储输入过的手机号

这种方法通过在前端使用一个数组来存储用户已经输入过的手机号，并在用户再次输入手机号时进行判断。

一、建立数组存储手机号

首先，我们需要创建一个数组来存储用户输入过的所有手机号。

let phoneNumbers = [];

二、判断手机号是否存在

我们可以在用户输入手机号时，检查该手机号是否已经存在于数组中。

function isPhoneNumberEntered(phoneNumber) {

    return phoneNumbers.includes(phoneNumber);
}

三、添加新手机号

如果用户输入的手机号不存在于数组中，我们就将其添加到数组中。

function addPhoneNumber(phoneNumber) {

    if (!isPhoneNumberEntered(phoneNumber)) {
        phoneNumbers.push(phoneNumber);
        return true;
    }
    return false;
}

四、综合示例

以下是一个综合示例，展示如何在用户输入手机号后进行判断和存储。

<!DOCTYPE html>

<html>
<head>
    <title>Phone Number Checker</title>
</head>
<body>
    <input type="text" id="phoneNumberInput" placeholder="Enter phone number">
    <button onclick="checkPhoneNumber()">Check</button>
    <p id="result"></p>
    <script>
        let phoneNumbers = [];
        function isPhoneNumberEntered(phoneNumber) {
            return phoneNumbers.includes(phoneNumber);
        }
        function addPhoneNumber(phoneNumber) {
            if (!isPhoneNumberEntered(phoneNumber)) {
                phoneNumbers.push(phoneNumber);
                return true;
            }
            return false;
        }
        function checkPhoneNumber() {
            let phoneNumberInput = document.getElementById('phoneNumberInput').value;
            let resultElement = document.getElementById('result');
            if (addPhoneNumber(phoneNumberInput)) {
                resultElement.innerText = 'Phone number added.';
            } else {
                resultElement.innerText = 'Phone number already entered.';
            }
        }
    </script>
</body>
</html>

在这个示例中，用户可以输入手机号并点击“Check”按钮。系统会判断该手机号是否已经输入过，并在页面上显示相应的提示信息。

五、使用 LocalStorage 存储手机号

为了在页面刷新后仍能保留已输入的手机号，我们可以使用 LocalStorage。

function addPhoneNumber(phoneNumber) {

    let storedNumbers = JSON.parse(localStorage.getItem('phoneNumbers')) || [];
    if (!storedNumbers.includes(phoneNumber)) {
        storedNumbers.push(phoneNumber);
        localStorage.setItem('phoneNumbers', JSON.stringify(storedNumbers));
        return true;
    }
    return false;
}

通过以上方法，我们可以有效地判断用户输入的手机号是否已经存在，并进行相应的处理。

相关问答FAQs：

1. 如何在JavaScript中判断手机号码是否已经输入？
在JavaScript中，可以通过以下代码来判断手机号码是否已经输入过：

var phoneNumber = document.getElementById("phoneNumber").value;
if(phoneNumber === "") {
  console.log("手机号码尚未输入");
} else {
  console.log("手机号码已经输入");
}

其中，"phoneNumber"是手机号码输入框的ID，通过getElementById方法获取输入框的值，然后通过判断是否为空字符串来确定手机号码是否已经输入过。

2. 如何使用JavaScript验证用户是否已经输入了手机号码？
可以使用正则表达式来验证用户是否已经输入了手机号码，下面是一个示例代码：

var phoneNumber = document.getElementById("phoneNumber").value;
var regex = /^[1][3-9]d{9}$/;
if(regex.test(phoneNumber)) {
  console.log("手机号码已经输入");
} else {
  console.log("手机号码格式不正确或尚未输入");
}

上述代码中，regex是一个正则表达式，用于验证手机号码的格式是否正确。通过test方法对手机号码进行验证，如果返回true则表示手机号码已经输入过且格式正确，否则表示手机号码格式不正确或尚未输入。

3. 如何在前端页面显示用户是否已经输入了手机号码？
可以通过JavaScript将用户输入的手机号码显示在前端页面上，下面是一个简单的示例代码：

<input type="text" id="phoneNumber" placeholder="请输入手机号码">
<button onclick="showPhoneNumber()">显示手机号码</button>
<p id="result"></p>

<script>
function showPhoneNumber() {
  var phoneNumber = document.getElementById("phoneNumber").value;
  if(phoneNumber === "") {
    document.getElementById("result").innerHTML = "手机号码尚未输入";
  } else {
    document.getElementById("result").innerHTML = "手机号码已经输入：" + phoneNumber;
  }
}
</script>

上述代码中，通过点击按钮触发showPhoneNumber函数，该函数获取输入框中的手机号码，然后根据是否为空来显示相应的提示信息。通过设置<p>标签的innerHTML属性，将结果显示在前端页面上的指定位置。