JavaScript表单验证的两种实现方法

下面是详细讲解JavaScript表单验证的两种实现方法的攻略。

一、方法一：使用HTML5表单验证

在HTML5中，可以使用一些input标签的属性进行简单的表单验证。

1. 必填项验证

首先介绍一个必填项验证的属性，即required属性。将该属性设置在input标签中，可以让表单中的该输入框变为必填项。

示例代码：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">提交</button>
</form>

当用户点击提交按钮提交表单时，如果该输入框为空，则会提示用户该输入框不能为空。

2. 正则表达式验证

还可以使用另一个验证属性，即pattern属性，来进行正则表达式验证。

示例代码：

<form>
  <label for="phone">手机号码：</label>
  <input type="text" id="phone" name="phone" pattern="\d{11}">
  <button type="submit">提交</button>
</form>

在该示例中，使用了pattern属性来设置该输入框中只能输入11位数字，如果输入的不是数字或者位数不够，提交时会提示用户手机号格式不正确。

二、方法二：使用JavaScript代码实现表单验证

使用JavaScript代码实现表单验证可以更加灵活地控制验证规则，并为用户提供更友好的提示。

1. 获取表单元素

实现JavaScript表单验证的第一步是获取表单元素，可以使用document.getElementById()或者document.querySelector()等方法。

示例代码：

var form = document.querySelector('form');
var nameInput = document.getElementById('name');
var phoneInput = document.getElementById('phone');

2. 绑定事件监听器

可以使用表单元素的onblur事件监听器来监听用户离开输入框的事件，并进行验证。

示例代码：

nameInput.onblur = function() {
  var nameValue = nameInput.value;
  if (nameValue.trim() === '') {
    nameInput.style.border = '1px solid red';
    alert('姓名不能为空');
  } else {
    nameInput.style.border = '';
  }
}

在该示例中，当用户离开姓名输入框时，会获取输入框的值，如果该值为空，则弹出提示框并将输入框边框变为红色；如果该值不为空，则边框恢复原来的颜色。

3. 提交前验证

还可以在表单提交前进行验证，使用表单的onsubmit事件监听器来监听提交事件，并进行验证。

示例代码：

form.onsubmit = function() {
  var phoneValue = phoneInput.value;
  if (!/^1\d{10}$/.test(phoneValue)) {
    phoneInput.style.border = '1px solid red';
    alert('手机号格式不正确');
    return false;
  }
}

在该示例中，当用户提交表单时，会获取手机号输入框的值，如果该值不符合正则表达式规则，则弹出提示框，将输入框边框变为红色，并阻止表单提交。如果该值符合规则，则表单可以成功提交。

以上就是JavaScript表单验证的两种实现方法的攻略。