js各种验证文本框输入格式(正则表达式)

2023年6月10日下午7:31 • JavaScript

下面是详细讲解“js各种验证文本框输入格式(正则表达式)”的完整攻略。

一、什么是正则表达式

正则表达式是一种描述字符模式的方法，可以用来匹配、搜索、替换字符串等。在JavaScript中，可以使用内置对象RegExp来创建正则表达式。

正则表达式的基本语法如下：

/pattern/modifiers;

其中，pattern是要匹配的模式，modifiers是可选的修饰符，常用修饰符有i（不区分大小写）、g（全局搜索）、m（多行搜索）等。

二、常用文本框验证规则

下面是常见的文本框验证规则及相应的正则表达式：

1. 验证电子邮件地址

function checkEmail(email) {
  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  return reg.test(email);
}

2. 验证手机号码

function checkMobile(mobile) {
  var reg = /^1\d{10}$/;
  return reg.test(mobile);
}

3. 验证身份证号码

function checkIdCard(idCard) {
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return reg.test(idCard);
}

4. 验证银行卡号

function checkBankCard(bankCard) {
  var reg = /^(\d{16}|\d{19})$/;
  return reg.test(bankCard);
}

5. 验证密码强度

function checkPassword(password) {
  var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/;
  return reg.test(password);
}

其中，密码强度验证的正则表达式要求密码至少包含一个数字、一个小写字母、一个大写字母，长度不少于8个字符。

三、示例说明

示例一：验证邮箱地址

下面是一个示例，展示如何使用JavaScript字符串函数和正则表达式验证邮箱地址：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>验证邮箱地址</title>
</head>
<body>
  <input id="email" type="text" placeholder="请输入邮箱地址">
  <button onclick="submit()">提交</button>
  <script>
    function submit() {
      var email = document.getElementById("email").value;
      if (checkEmail(email)) {
        alert("邮箱地址合法！");
      } else {
        alert("邮箱地址不合法！");
      }
    }
    function checkEmail(email) {
      var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      return reg.test(email);
    }
  </script>
</body>
</html>

示例二：验证密码强度

下面是一个示例，展示如何使用JavaScript字符串函数和正则表达式验证密码强度：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>验证密码强度</title>
</head>
<body>
  <input id="password" type="password" placeholder="请输入密码">
  <button onclick="submit()">提交</button>
  <script>
    function submit() {
      var password = document.getElementById("password").value;
      if (checkPassword(password)) {
        alert("密码强度合格！");
      } else {
        alert("密码强度不合格！");
      }
    }
    function checkPassword(password) {
      var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/;
      return reg.test(password);
    }
  </script>
</body>
</html>

以上两个示例都展示了如何通过JavaScript和正则表达式实现文本框的验证，可以根据不同的需求调整正则表达式来满足具体的要求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js各种验证文本框输入格式(正则表达式) - Python技术站