原生js实现表单的正则验证（验证通过后才可提交）

下面是原生js实现表单的正则验证的完整攻略，分为以下几个步骤：

1. 前置知识

在实现表单的正则验证之前，需要先了解表单的基本结构和事件绑定的方法。

表单基本结构

<form>
  <input type="text" name="username" id="username">
  <input type="password" name="password" id="password">
  <!-- 其他表单元素 -->
  <button type="submit">提交</button>
</form>

在表单中，我们需要对其中的表单元素进行验证，常见的表单元素包括 input、select、textarea 等。

事件绑定方法

在 JS 中，常用的事件绑定方法有 addEventListener 和 attachEvent，这里我们以 addEventListener 为例：

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  // 按钮被点击时的处理代码
});

2. 正则表达式验证

在实现表单正则验证时，我们需要使用正则表达式来判断表单元素的值是否符合预期。常见的正则表达式如下：

• 邮箱正则：/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
• 手机号正则：/^[1][3-9][0-9]{9}$/
• 身份证号正则：/^\d{17}[\d|X]$|^\d{15}$/
• 网址正则：/^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/

JS 中使用正则表达式进行匹配的方法为 test()，示例代码如下：

var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (emailReg.test(email)) {
  // 邮箱格式正确
} else {
  // 邮箱格式错误
}

3. 表单验证实现

在实现表单正则验证时，我们需要为表单添加一个 submit 的事件监听器，代码如下：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 防止表单的默认提交行为
  // 表单验证逻辑
});

在表单验证逻辑中，我们需要遍历表单的每个表单元素，判断其是否符合正则表达式的要求，如果有任何一个表单元素不符合要求，则表单验证失败，否则表单验证成功，可以进行表单的提交行为。

以下是一些示例代码：

邮箱验证示例

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 防止表单的默认提交行为
  var email = document.querySelector('#email').value;
  var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
  if (emailReg.test(email)) {
    // 邮箱格式正确，可以进行表单提交
    form.submit();
  } else {
    alert('邮箱格式不正确！');
  }
});

电话号码验证示例

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 防止表单的默认提交行为
  var phone = document.querySelector('#phone').value;
  var phoneReg = /^[1][3-9][0-9]{9}$/;
  if (phoneReg.test(phone)) {
    // 手机号码格式正确，可以进行表单提交
    form.submit();
  } else {
    alert('手机号码格式不正确！');
  }
});

以上就是原生 JS 实现表单正则验证的完整攻略，希望对你有所帮助。