HTML5+setCutomValidity()函数验证表单实例分享

HTML5+setCustomValidity()函数是HTML5表单验证的一种手段，可以用于实现自定义的表单验证。它可以在用户提交表单之前，动态地对表单中的输入进行检验，通过返回值控制表单是否能够提交。以下是使用HTML5+setCustomValidity()函数进行表单验证的完整攻略。

1. 创建一个基本表单

首先，在HTML中创建一个表单，并添加一些元素，示例如下：

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="submit">
</form>

这是一个简单的登录表单，其中包含了两个必填项：用户名和密码。当用户尝试提交表单时，如果这两个输入框中有任何一个为空，浏览器就会弹出一个默认的提示框，提醒用户填写必填信息。

2. 使用setCustomValidity()函数添加自定义提示

我们可以使用setCustomValidity()函数来添加自定义的提示信息。该函数需要传入一个字符串作为参数，用于指定自定义的提示信息。例如：

document.getElementById("username").setCustomValidity("用户名不能为空！");

这段代码将在用户名输入框中添加一个自定义的提示信息，即“用户名不能为空！”。如果用户未填写用户名，提交表单时这个提示信息就会显示出来。

3. 使用JavaScript进行表单验证

现在，我们可以通过JavaScript代码在用户提交表单时进行验证了。我们可以在表单元素的submit事件中添加一个事件监听器，监听表单提交事件，并在该事件中进行表单验证。例如：

document.querySelector('form').addEventListener('submit', function(event) {
  var usernameInput = document.getElementById('username');
  var passwordInput = document.getElementById('password');

  if (usernameInput.value.trim() === '') {
    usernameInput.setCustomValidity('用户名不能为空！');
    event.preventDefault();
  } else {
    usernameInput.setCustomValidity('');
  }

  if (passwordInput.value.trim() === '') {
    passwordInput.setCustomValidity('密码不能为空！');
    event.preventDefault();
  } else {
    passwordInput.setCustomValidity('');
  }
});

这段代码将在表单提交时对用户名和密码进行检验。如果任何一个输入框为空，将会设置一个自定义的提示信息并阻止表单提交。

在这个代码中，我们首先获取了用户名和密码输入框的引用。然后，我们对其进行了非空检验，如果任何一个输入框为空，我们就会使用setCustomValidity()函数添加一个自定义的提示信息，并调用event.preventDefault()方法阻止表单的提交。如果输入框不为空，我们就清除自定义的提示信息，允许表单提交。

4. 示例说明

以下是在表单中添加自定义提示信息的示例：

<form>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById('email').setCustomValidity('请填写有效的Email地址！');
</script>

在这个示例中，我们对Email输入框添加了一个自定义提示信息，提示用户填写有效的Email地址。

下面是在表单提交时进行自定义验证的示例：

<form>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" required>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    var ageInput = document.getElementById('age');
    if (ageInput.value <= 0 || ageInput.value > 150) {
      ageInput.setCustomValidity('请填写有效的年龄！');
      event.preventDefault();
    } else {
      ageInput.setCustomValidity('');
    }
  });
</script>

在这个示例中，我们对年龄输入框进行了自定义验证，检验其是否在0~150之间。如果输入框中的值不在范围内，我们就会设置一个自定义的提示信息，并阻止表单的提交。

通过这两个示例，我们可以清楚地了解到HTML5+setCustomValidity()函数的应用方式，以及如何使用该函数进行表单验证。