表单正则验证demo

最新推荐文章于 2025-05-13 19:08:48 发布

一个W牛

最新推荐文章于 2025-05-13 19:08:48 发布

阅读量311

点赞数 5

文章标签：前端 javascript jquery 正则表达式经验分享

本文链接：https://blog.youkuaiyun.com/qq_45587547/article/details/136912132

版权

在进行表单提交前往往要验证输入的内容是否合规，只有合规才能进行下一步。
参考文档 : 常用正则表达式
常见的一些正则验证：

用户名 : /[a-zA-Z][a-zA-Z0-9_]{4,15}/  (字母开头，允许5-16字节，允许字母数字下划线)
密码   : /[a-zA-Z]\w{5,17}/    (以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
邮箱   : /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
中文   : /[\u4e00-\u9fa5]+/
身份证 : /\d{17}[0-9Xx]|\d{15}/
手机号 ：/(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/

语法参考

.        除换行符以外的所有字符。
^        字符串开头。
$        字符串结尾。
\d,\w,\s 匹配数字、字符、空格。
\D,\W,\S 匹配非数字、非字符、非空格。
[abc]    匹配 a、b 或 c 中的一个字母。
[a-z]    匹配 a 到 z 中的一个字母。
[^abc]   匹配除了 a、b 或 c 中的其他字母。
a|b      匹配 a 或 b。
?        0 次或 1 次匹配。
*        匹配 0 次或多次。
+        匹配 1 次或多次。
{n}      匹配 n次。
{n,}     匹配 n次以上。
{m,n}    最少 m 次，最多 n 次匹配。
(expr)   捕获 expr 子模式,以 \1 使用它。
(?:expr) 忽略捕获的子模式。
(?=expr) 正向预查模式 expr。
(?!expr) 负向预查模式 expr。
\        特殊字符转义

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    .error {
      color: red;
    }
  </style>
</head>

<body>
  <form id="myForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <span id="usernameError" class="error"></span>
    <br>
    <label for="email">电子邮件:</label>
    <input type="text" id="email" name="email">
    <span id="emailError" class="error"></span>
    <br>

    <label for="youbian">中国邮政编码:</label>
    <input type="text" id="youbian" name="youbian">
    <span id="youbianError" class="error"></span>
    <br>

    <input type="submit" value="提交">
  </form>

  <script>
    $(document).ready(function () {
      $('#myForm').on('submit', function (event) {
        event.preventDefault();  // 阻止表单默认提交行为，以便我们可以手动处理 
        $('.error').text('');// 重置错误消息 

        // 验证用户名  
        var username = $('#username').val();
        var usernameRegex = /^[a-zA-Z0-9]{4,16}$/;//正则表达式
        if (!usernameRegex.test(username)) {
          $('#usernameError').text('用户名必须包含4到16个字母或数字');
          return false; // 验证失败，退出函数  
        }

        // 验证电子邮件  
        var email = $('#email').val();
        var emailRegex = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
        if (!emailRegex.test(email)) {
          $('#emailError').text('请输入有效的电子邮件地址');
          return false; // 验证失败，退出函数  
        }

        // 验证邮编  
        var youbian = $('#youbian').val();
        var youbianRegex = /[1-9]\d{5}(?!\d)/;
        if (!youbianRegex.test(youbian)) {
          $('#youbianError').text('请输入6位数的邮编');
          return false; // 验证失败，退出函数  
        }

        // 如果所有验证都通过，可以提交表单或执行其他操作  
        alert('表单验证通过，可以提交！');
      });

      // 你还可以为输入框添加blur事件处理器，以便在用户离开输入框时立即进行验证  
      $('#username, #email,#youbian').on('blur', function () {
        $('#myForm').trigger('submit'); // 触发表单自动提交事件以进行验证  
      });
    });
  </script>
</body>
</html>

效果图：
表单验证效果图