JQuery 输入掩码电话号码验证

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将学习如何使用输入掩码来验证电话号码。我们将使用 JQuery 来完成此操作。jQuery Mask 描述了 jQuery 插件。基于其他元素和 HTML 输入字段，jQuery Mask 将应用一个掩码。当开发人员希望某个特定的输入字段采用他们定义的格式来接收输入时，我们将使用 jQuery Mask 插件。使用后端语言，我们可以创建这种类型的函数。如果我们尝试直接使用前端本身来创建它，那将非常节省内存和时间。JQuery 的输入掩码是一个易于使用且轻量级的 jQuery 插件。使用 jQuery 输入掩码，可以轻松创建输入掩码。它用于确保输入的预定义格式。输入掩码可用于数字、日期、电话号码等。

在下面的示例中，我们将为电话号码添加一个输入掩码。我们可以验证各种数量的电话号码，并且电话号码也可以有不同的国家/地区代码。这意味着我们不仅可以验证印度电话号码，还可以验证不同国家/地区的电话号码。如果开发人员希望他们的网站用户以他们定义的格式指定 10 位电话号码。在这种情况下，jQuery 输入掩码将非常有用，因为它将接收用户的输入并自动将其转换为定义的格式。要在 JQuery 中添加输入掩码或验证我们的印度电话号码，我们将使用 jquery.inputmask.bundle JS 插件。解决此问题的步骤如下。

解决方案

$(document).ready(function(){
    $('.phone').inputmask('(999)-999-9999');
});

添加输入掩码的完整示例如下。

示例

<!DOCTYPE html>
<html>
<head>
    <title> Phone number Validation using jQuery Input Mask </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
    <h1> Phone number Validation using jQuery Input Mask </h1>
  
    <strong>Phone Number:</strong>  
    <input type="text" name="phone" class="phone form-control" value="7293374934">
  
    <strong>Phone Number 2:</strong>  
    <input type="text" name="phone" class="phone2 form-control">
  
    <strong>Phone Number 3:</strong>  
    <input type="text" name="phone" class="phone3 form-control">
  
</div>
  
<script>
    $(document).ready(function(){
        $('.phone').inputmask('(999)-999-9999');
        $('.phone2').inputmask('(99)-9999-9999');
        $('.phone3').inputmask('99-9999999999');
    });
</script>
  
</body>
</html>

现在我们的上述代码已经准备就绪，可以运行了。运行后，将生成以下输出：

JQuery Input Mask Phone Number Validation

下一主题使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

JQuery 输入掩码电话号码验证

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 输入掩码电话号码验证

相关帖子

使用 JQuery Ajax 的动态拖放表行

带有缩略图的 JQuery 照片库

JQuery 排序

在 jQuery 的下拉菜单中获取选定的值

jquery cookie 同意插件

Jquery 验证码小部件

使用 JQuery 创建待办事项列表

JQuery 页面堆砌

使用 JQuery 将 Excel 数据导入 HTML 表格

JQuery 裁剪插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器