jquery验证只能输入数字和字母

原创

mob649e815b1a71 2023-07-27 11:10:24 ©著作权

文章标签 jQuery HTML 字符串 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815b1a71的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery验证只能输入数字和字母

在开发Web应用程序时，经常需要对用户输入的内容进行验证以确保数据的准确性和安全性。其中一个常见的需求是限制用户只能输入数字和字母。本文将介绍如何使用jQuery实现这样的验证功能，并提供相应的代码示例。

HTML代码结构

首先，我们需要在HTML中创建一个表单，其中包含一个文本输入框和一个提交按钮。代码如下:

<form id="myForm">
  <input type="text" id="inputField" name="inputField" />
  <button type="submit">提交</button>
</form>

jQuery验证代码

接下来，我们使用jQuery编写验证逻辑。我们将使用keypress事件，该事件在用户按下键盘上的任意键时触发。代码如下:

$(document).ready(function() {
  $('#inputField').keypress(function(event) {
    var inputValue = String.fromCharCode(event.which);
    var pattern = /^[A-Za-z0-9]+$/;
    if (!pattern.test(inputValue)) {
      event.preventDefault();
    }
  });
});

让我们逐行解析上述代码:

$(document).ready(function() { ... });：这是一个jQuery的语法，用于确保DOM已经完全加载后再执行后续的代码。
$('#inputField').keypress(function(event) { ... });：这一行代码为输入框绑定了keypress事件的处理函数。当用户在输入框中按下键盘上的任意键时，该函数将被调用。
var inputValue = String.fromCharCode(event.which);：这行代码获取用户当前按下的键所对应的字符。
var pattern = /^[A-Za-z0-9]+$/;：这是一个正则表达式，用于验证输入的字符是否只包含数字和字母。^表示匹配字符串的开始，[A-Za-z0-9]表示匹配任意一个字母或数字，+表示匹配一个或多个前面的字符，$表示匹配字符串的结束。
if (!pattern.test(inputValue)) { ... }：这个条件判断语句用于检查用户输入的字符是否符合要求。如果不符合要求，就调用event.preventDefault()来阻止默认的键盘事件。

完整的示例

下面是将以上的HTML和jQuery代码整合到一起的完整示例。你可以将其复制到一个HTML文件中并在浏览器中运行来看到效果。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery验证只能输入数字和字母</title>
  <script src="
  <script>
    $(document).ready(function() {
      $('#inputField').keypress(function(event) {
        var inputValue = String.fromCharCode(event.which);
        var pattern = /^[A-Za-z0-9]+$/;
        if (!pattern.test(inputValue)) {
          event.preventDefault();
        }
      });
    });
  </script>
</head>
<body>
  <form id="myForm">
    <input type="text" id="inputField" name="inputField" />
    <button type="submit">提交</button>
  </form>
</body>
</html>