正则表达式

最新推荐文章于 2024-09-27 22:00:00 发布

Argonaut_

最新推荐文章于 2024-09-27 22:00:00 发布

阅读量692

点赞数

分类专栏： HTML和CSS外加JavaScript自学历程文章标签：正则表达式 javascript 开发语言

本文链接：https://blog.csdn.net/Argonaut_/article/details/128701749

版权

HTML和CSS外加JavaScript自学历程专栏收录该内容

84 篇文章 6 订阅

订阅专栏

文章目录

什么是正则表达式
如何使用正则表达式
- 第一步：编写一个正则表达式。
- 第二步：使用正则表达式验证目标字符串。
常用表达式
常用的元字符（特殊字符）
常用的限定符
常用的修饰符
其他
使用正则表达式验证邮箱

什么是正则表达式

☀️正则表达式是用来验证字符串的模版，开发中为了验证邮箱、手机号、身份证号等字符串是否符合要求，通常会使用正则表达式。
☀️作为匹配字符串的模版，正则表达式本身也是字符串，例如 aaa 就是一个最简单的正则表达式，只不过该表达式只能匹配字符串 aaa，如果一个正则表达式只能匹配 aaa 那么它作为正则表达式的意义就没多大了。真正的正则表达式是能够匹配多个字符串的通用的字符串。

如何使用正则表达式

第一步：编写一个正则表达式。

var regularExpression = /正则表达式/;

/ / 里面写的内容就是我们的正则表达式，具体写法因为比较复杂我们稍后再说。我们先来学习如何使用写好的正则表达式进行验证。

第二步：使用正则表达式验证目标字符串。

假设第一步我们的正则表达式已经编写完毕，那么我们使用正则表达式去验证目标字符串是否符合格式要求很简单，只需要使用下列代码验证即可。

var flag = regularExpression.test("目标字符串");

上述代码调用了正则表达式的 test 方法进行验证，调用时传入一个需要验证的目标字符串，验证通过返回 true ，不通过返回 false。

常用表达式

在这里插入图片描述

常用的元字符（特殊字符）

在这里插入图片描述

常用的限定符

在这里插入图片描述

常用的修饰符

在这里插入图片描述

其他

在这里插入图片描述

新建 reg1.html，实现用户名长度为 6-10，且只能由字母组成的正则表达式。

<!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></title>
    <script>
      window.onload = function () {
        var userForm = document.getElementById("userForm");
        var usernameText = document.getElementById("username");
        var msg = document.getElementById("msg");
        btn1.onclick = function () {
          var regExp = /^[a-zA-Z]{6,10}$/;
          if (!regExp.test(username.value)) {
            msg.innerHTML = '<b style="color:red;">用户名格式不正确</b>';
          } else {
            // 提交表单
            userForm.submit();
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <form id="userForm" action="handle.html" method="get">
      用户名: <input type="text" id="username" />
      <input id="btn1" type="button" value="提交" />
    </form>
  </body>
</html>

新建 handle.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>
    我是处理表单的代码...
  </body>
</html>

运行 reg1.html，用户输入非字母值时或用户名长度不在 6-10 位，点击提交都会显示“用户名格式不正确”，输入内容后提交，可以提交到 handle.html 页面处理。

使用正则表达式验证邮箱

在 reg1.html 中加入邮箱文本框，然后使用正则表达式验证邮箱格式是否合法，要求邮箱的 @ 符前面有 5 到 10 个字符，@ 后面至少 1 个字符，以 com、net、org 结尾，代码如下：

<!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></title>
    <script>
      function isEmail(email) {
        //验证规则：5-10个字符@1个或多个以上字符，以com、net、org结尾
        var regExp = /^\w{5,10}@\w+\.(com|net|org)$/;

        var flag = regExp.test(email);

        return flag;
      }

      window.onload = function () {
        var userForm = document.getElementById("userForm");
        var usernameText = document.getElementById("username");
        var emailText = document.getElementById("email");
        var msg = document.getElementById("msg");
        btn1.onclick = function () {
          var username = usernameText.value;
          var email = emailText.value;

          if (!isEmail(email)) {
            msg.innerHTML = '<b style="color:red;">邮箱格式不正确</b>';
          } else {
            // 提交表单
            userForm.submit();
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <form id="userForm" action="handle.html" method="get">
      用户名: <input type="text" id="username" /> <br />
      邮箱：<input type="text" id="email" /><br />
      <input id="btn1" type="button" value="提交" />
    </form>
  </body>
</html>