开发人员在其早期开发中面临的主要问题之一是如何从用户那里获取数据，然后验证这些数据。如果你从用户那里得到一个输入，如姓名或注册号码，那么你可以很容易地验证该数据，然而，当你得到一个电话号码的输入时，它就变得有点复杂。
在这篇文章中，我们将讨论如何从用户那里获得一个电话号码，然后根据我们的需要，使用带有tel类型的HTML5输入标签进行验证，然后使用一个简单的HTML输入标签，使用JavaScript进行验证。
使用带tel类型的HTML5输入标签
我们可以使用HTML5输入标签来接受用户的输入，我们可以在输入标签中给出tel类型，告诉浏览器这个输入框应该接受一个电话号码。HTML5输入tel类型有一些优点，一个是我们可以在输入标签中设置必填 属性，告诉浏览器用户不输入电话号码就不能继续输入，另一个是我们可以设置模式属性。让我们来演示一下HTML中的输入标签。
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
在上面的代码中，我们可以看到，我们给了一个正则表达式作为输入标签的模式，因此，使用它可以验证电话号码。让我们来看看一个合适的HTML程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myform" action="javascript:void(0)">
<label for="myform_phone">Example: 123-456-7890</label>
<input type="tel" id="myform_phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="Enter Phone Number"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
在上面的代码中，我们初始化了标签，它显示了一个电话号码的例子，在下面的输入标签中，我们定义了一个模式。现在，输入标签本身将负责验证从用户那里获得的输入。在这之后，我们定义了一个按钮，并给了它一个按钮的类型。每当用户点击提交 按钮时，它将根据表单标签的动作生成一个响应。下面是一些例子。
如果我们点击提交按钮，让电话号码输入框空白。
如果我们给出一个错误的模式并点击提交按钮，我们将看到以下警告。
使用JavaScript来验证电话号码
我们也可以用JavaScript来验证电话号码。为此首先我们要在HTML中以如下方式创建一个输入标签和一个按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<label for="myPhone">Example: 123-456-7890</label>
<input type="tel" id="myPhone" placeholder="Enter Phone Number">
<button onclick="handleClick()">Submit</button>
<script src="code.js"></script>
</body>
</html>
我们在按钮元素上使用了onclick事件，这意味着只要用户点击提交按钮，handleClick()函数就会开始执行。这个handleClick()函数将在一个单独的文件code.js中被初始化，我们用上面代码中的脚本 标签引用了这个文件。
现在让我们来研究一下JavaScript部分。
// function to handle click on submit button
const handleClick=()=>{
// getting the reference of myPhone input
var input = document.getElementById("myPhone").value;
// format for the phone number
var format = /^\(?([0-9]{3})\)?[-]?([0-9]{3})[-]?([0-9]{4})$/;
// conditional statements
if(input===''){
alert("Please Enter Phone Number")
}
else if(input.match(format)){
alert("Phone Number: "+ input);
}
else{
alert("Type using correct format");
}
}
在上面的代码中，首先，我们初始化了handleClick()函数，然后我们引用了输入标签的值。之后，我们使用正则表达式定义了我们想要的电话号码的格式。在这种情况下，一个可接受的电话号码例子是123-456-7890。接下来，我们使用条件语句，如果输入是空的，就提示请输入电话号码，如果输入符合格式，就提示该号码，否则提示用户输入的号码格式错误。让我们逐一查看输出。
首先，我们将点击提交按钮，同时让输入框空白。
接下来，我们将输入一个错误格式的数字，然后我们将看到以下输出。
最后，让我们去找正确的格式，看看输出结果。
结论
在JavaScript中验证电话号码可能会成为一个新的开发者的头痛问题。我们有两种方法可以用来验证电话号码。首先，在HTML输入标签的帮助下，接受用户的输入。接下来，为了验证电话号码，我们给输入标签提供tel的类型和它应该验证的模式。第二种方法是制作一个自定义的JavaScript程序，根据给定的正则表达式的格式来验证你的电话号码。
在这篇文章中，我们学习了如何将电话号码作为用户的输入，然后使用两种方法验证该电话号码；带有tel类型的HTML5输入标签和自定义JavaScript逻辑。
