表单验证正则表达式实例代码详解

2023年6月10日下午6:42 • JavaScript

《表单验证正则表达式实例代码详解》是一篇关于前端表单验证的教程，主要介绍了如何使用正则表达式进行表单验证。以下是本文的完整攻略。

一、表单验证正则表达式基础

1.1 正则表达式的概念

正则表达式是一种用来描述、匹配、搜索文本的方式。通过使用正则表达式，我们可以快速有效地验证用户输入的内容是否符合规则。

1.2 常用正则表达式语法

字符匹配：使用普通字符匹配具体的字符。比如 /abc/ 匹配 "abc" 字符串。
字符组：用来匹配一组字符中的任意一个字符。比如 [abc] 匹配 "a"、"b"、"c" 中的任意一个字符。
反义字符组：用来匹配不在给定字符组中的字符。比如 [^abc] 匹配除了 "a"、"b"、"c" 之外的任意一个字符。
数量词：用来指定匹配字符的数量。比如 a{3} 匹配三个 "a" 字符。
通用字符：用来匹配任意字符。比如 . 匹配任意一个字符。
位置限定符：用来指定匹配字符的位置。比如 ^ 匹配字符串开头，$ 匹配字符串结尾。

1.3 常用表单验证正则表达式实例

下面是一些常见的表单验证正则表达式实例：

邮箱验证：/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
手机号验证：/^1[3456789]\d{9}$/
身份证号验证：/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/
网址验证：/^(https?|ftp):\/\/[^\s\/$.?#].[^\s]*$/

二、表单验证正则表达式实现

2.1 HTML 表单

HTML 表单是前端表单验证的基础，下面是一个简单的 HTML 表单代码：

<form action="#" method="post" id="myForm">
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username"><br>

  <label for="password">密码：</label>
  <input type="password" name="password" id="password"><br>

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

该表单包含了两个输入框（用户名和密码）和一个提交按钮。

2.2 Javascript 验证

一般来说，我们需要使用javascript对表单输入内容进行前端验证，下面是一个Javascript实现表单验证的代码片段：

let myForm = document.getElementById('myForm');
let username = document.getElementById('username');
let password = document.getElementById('password');

myForm.onsubmit = function(e) {
  if (!validateUsername(username.value)) {
    alert('请输入有效的用户名');
    return false;
  }

  if (!validatePassword(password.value)) {
    alert('请输入有效的密码');
    return false;
  }
};

function validateUsername(username) {
  // 假设该函数返回true表示用户名有效
  return /^\w{4,16}$/.test(username);
}

function validatePassword(password) {
  // 假设该函数返回true表示密码有效
  return /^\w{6,20}$/.test(password);
}

上面的代码实现了对用户名和密码的前端验证。其中，validateUsername 函数用来验证用户名是否有效，validatePassword 函数用来验证密码是否有效。这两个函数都是通过正则表达式进行验证的。

三、常见表单验证实例分析

以下是两个常见的表单验证实例解析。

3.1 手机号验证

手机号验证是前端表单验证中非常常见的场景，下面是对手机号验证正则表达式的详细解析：

/^1[3456789]\d{9}$/

该正则表达式包括了以下几个部分：

^：代表字符串的开头。
1：代表手机号的第一个号码必须为 "1"。
[3456789]：代表手机号的第二个号码必须为 "3"、"4"、"5"、"6"、"7"、"8" 或 "9" 中的一个。
\d{9}：代表手机号的剩余 9 位由数字组成。
$：代表字符串的结尾。

因此，该正则表达式表示了一个有效的中国大陆手机号码。如果要扩展该正则表达式到其他国家或地区，需要根据不同的号码规则进行调整。

3.2 邮箱验证

邮箱验证也是前端表单验证中非常常见的场景，下面是对邮箱验证正则表达式的详细解析：

/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/