如何使用 jQuery 在文本框中只允许 10 个数字？

给定一个包含文本框输入元素的 HTML 文档，任务是允许使用 jQuery 在该特定文本框中输入严格的 10 位数字或数字。有两种方法可以完成此任务：

方法 1：在 HTML 中使用模式属性。为模式属性定义以下正则表达式：

正则表达式：

\d{10}

说明： \d匹配 0 到 9（包括 0 和 9）范围内的数字或单个字符， {10}匹配同一个标记恰好十次。

在这种方法中，如果文本框中的输入与模式中的正则表达式不匹配属性，显示一个工具提示，指定应匹配请求的格式。另一方面，如果匹配，则会显示一条警告消息，说明表单已成功提交。

例子：

HTML



  
    
    
    Allow only 10 numbers in textbox using jQuery
    
    
  
  
    
      GeeksforGeeks
      jQuery - Allow only 10 numbers in textbox

HTML



  
    
    
    Allow only 10 numbers in textbox using jQuery
    
    
  
  
    
      GeeksforGeeks
      jQuery - Allow only 10 numbers in textbox

输出：

方法 2：使用 jQuery 方法，例如 keypress。首先，创建一个数组来存储数字 0（ASCII 值 48）到 9（ASCII 值 57）的所有 ASCII 代码或值，以便稍后可以验证文本框中的输入。接下来，使用输入标签的 maxlength 属性将输入的最大长度设置为 10。

jQuery 中的 event.which 属性检测文本框中输入的键盘字符。之后，检查每个输入字符的 ASCII 码是否是数组中 ASCII 码的一部分。如果字符的 ASCII 码在数组中，则输入的字符有效（0-9）。否则，使用 preventDefault() 禁止在文本框中输入字符。

最后，我们创建了一个具有上述所有函数的函数，并将该函数绑定到 keypress 方法，然后绑定到文本框。将 submit 方法附加到表单以检查文本框中给定输入的长度是否为 10。如果匹配，则可以提交表单，否则会显示一条警告消息，说明输入应包含 10 个数字。

例子：

HTML



  
    
    
    Allow only 10 numbers in textbox using jQuery
    
    
  
  
    
      GeeksforGeeks
      jQuery - Allow only 10 numbers in textbox

输出：