JavaScript 使用正则表达式进行表单验证的示例代码

表单验证是 web 开发中非常常见的需求。在 JavaScript 中使用正则表达式可以快速地进行表单验证。下面是使用正则表达式进行表单验证的示例代码。

具体步骤

第一步：获取表单元素和表单的值

在进行表单验证之前，需要获取表单元素以及表单元素的值。可以使用document.querySelector方法获取元素，使用value属性获取元素值。

const form = document.querySelector('#register-form'); // 获取表单元素
const usernameInput = document.querySelector('#username'); // 获取用户名输入框
const passwordInput = document.querySelector('#password'); //　获取密码输入框
const confirmPasswordInput = document.querySelector('#confirm-password'); // 获取确认密码输入框

const username = usernameInput.value;
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;

第二步：定义正则表达式

定义正则表达式需要考虑表单项的格式和规则，正则表达式的规则可以根据需要进行修改。

const usernameRegExp = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; // 用户名正则表达式
const passwordRegExp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/; // 密码正则表达式

解释一下上面的正则表达式，^ 表示字符串的开头，$ 表示字符串的结尾，[] 中表示可以匹配的一个字符，{} 表示匹配的次数，| 表示或。

usernameRegExp 表示用户名必须以字母开头，后面可以是字母、数字、下划线，长度为 5-16 个字符。
passwordRegExp 表示密码必须包含字母和数字，长度为 6-20 个字符。

第三步：使用正则表达式进行匹配

通过正则表达式进行匹配，将结果保存在变量中，然后根据匹配结果进行下一步的操作。

const isUsernameValid = usernameRegExp.test(username); // 是否是合法用户名
const isPasswordValid = passwordRegExp.test(password); // 是否是合法密码
const isConfirmPasswordValid = password === confirmPassword; // 密码是否一致

第四步：进行表单验证

将上面定义的验证结果进行判断，如果不符合表单项的规则，则显示相应的错误提示信息。

if (!isUsernameValid) {
  const usernameError = document.querySelector('#username-error');
  usernameError.innerHTML = '用户名不合法';
  usernameInput.classList.add('error'); // 添加错误样式
}

if (!isPasswordValid) {
  const passwordError = document.querySelector('#password-error');
  passwordError.innerHTML = '密码不合法';
  passwordInput.classList.add('error');
}

if (!isConfirmPasswordValid) {
  const confirmPasswordError = document.querySelector('#confirm-password-error');
  confirmPasswordError.innerHTML = '两次密码不一致';
  confirmPasswordInput.classList.add('error');
}

示例一：验证邮箱格式

验证邮箱格式可以使用以下的正则表达式：

const emailRegExp = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

解释一下上面的正则表达式：

^ 表示字符串的开头。
[\w-]+ 表示至少一个字母、数字、下划线、或横线。
(\.[\w-]+)* 表示匹配 . 加上一些字母、数字、下划线、或横线的组合，出现 0 次或多次。
@ 表示一个 @ 符号。
[\w-]+ 表示至少一个字母、数字、下划线、或横线。
(\.[\w-]+)+ 表示匹配 . 加上一些字母、数字、下划线、或横线的组合，出现 1 次或多次。
$ 表示字符串的结尾。

下面是验证邮箱格式的示例代码：

const emailInput = document.querySelector('#email'); // 获取邮箱输入框
const email = emailInput.value; // 获取邮箱值

const emailRegExp = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; // 邮箱验证正则表达式
const isEmailValid = emailRegExp.test(email); // 是否是合法邮箱

if (!isEmailValid) {
  const emailError = document.querySelector('#email-error');
  emailError.innerHTML = '邮箱格式不正确';
  emailInput.classList.add('error');
}

示例二：验证手机号格式

验证手机号格式可以使用以下的正则表达式：

const phoneRegExp = /^1[3|4|5|7|8][0-9]\d{8}$/;

解释一下上面的正则表达式：

^ 表示字符串的开头。
1 表示数字 1。
[3|4|5|7|8] 表示 3、4、5、7、8 中的一个数字。
[0-9] 表示任意一个数字。
\d{8} 表示匹配 8 个数字。
$ 表示字符串的结尾。

下面是验证手机号格式的示例代码：

const phoneInput = document.querySelector('#phone'); // 获取手机号输入框
const phone = phoneInput.value; // 获取手机号值

const phoneRegExp = /^1[3|4|5|7|8][0-9]\d{8}$/; // 手机号验证正则表达式
const isPhoneValid = phoneRegExp.test(phone); // 是否是合法手机号

if (!isPhoneValid) {
  const phoneError = document.querySelector('#phone-error');
  phoneError.innerHTML = '手机号格式不正确';
  phoneInput.classList.add('error');
}