HTML5 表单自定义校验：利用 JavaScript API (`setCustomValidity`) 增强用户体验 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML5 表单自定义校验：让你的表单不再“傻乎乎”

想象一下，你精心设计了一个网站，用户满怀期待地填写表单，准备注册或者购买。结果呢？用户辛辛苦苦填完，一点“提交”按钮，页面蹦出来一个红色的提示：“您的邮箱格式不正确！”或者“密码必须包含大小写字母和数字！”

是不是感觉用户瞬间想砸电脑？原本美好的体验，被这些“傻乎乎”的校验瞬间破坏。

这就是传统表单校验的痛点：要么过于死板，要么提示不够人性化。HTML5 提供了原生的校验功能，但很多时候，它并不能满足我们千奇百怪的需求。

这个时候，setCustomValidity 这个 JavaScript API 就闪亮登场了。它就像一位魔法师，能让你的表单拥有“智慧”，能够理解你的特定规则，并以更友好的方式告诉用户哪里出了问题。

今天，我们就来好好聊聊 setCustomValidity，看看它如何能让你的表单不再“傻乎乎”，而是变得聪明、贴心，最终提升用户体验。

什么是 setCustomValidity？

简单来说，setCustomValidity 是一个 HTMLInputElement 接口的方法，允许你自定义表单元素的校验信息。你可以用它来设置一个自定义的错误信息，当表单验证失败时，浏览器就会显示这个信息。

更重要的是，你可以根据自己的逻辑来判断表单元素是否有效。这意味着你可以实现一些非常复杂的校验规则，比如：

校验用户名是否已存在
校验两个日期是否在同一个范围内
校验优惠券是否有效
校验用户输入的银行卡号是否符合格式

是不是感觉一下子打开了新世界的大门？

setCustomValidity 的基本用法

setCustomValidity 的用法非常简单，只需要两步：

获取表单元素。
调用 setCustomValidity() 方法，传入错误信息。

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('input', function() {
  if (this.value === 'forbidden') {
    this.setCustomValidity('这个词是不允许的！');
  } else {
    this.setCustomValidity(''); // 清空错误信息，表示验证通过
  }
});

在这个例子中，我们监听了输入框的 input 事件，当用户输入的内容是 "forbidden" 时，我们就设置一个自定义的错误信息 "这个词是不允许的！"。否则，我们就清空错误信息，表示验证通过。

注意：

当你设置了自定义错误信息后，浏览器会认为这个表单元素是无效的，直到你清空错误信息。
清空错误信息非常重要！否则，即使用户输入了正确的内容，表单仍然会被认为是无效的。
错误信息应该清晰、明确，让用户知道哪里出了问题，以及如何解决。

setCustomValidity 的进阶用法：让你的校验更智能

仅仅设置一个简单的错误信息还不够，我们需要让我们的校验更智能，更贴合实际需求。

1. 校验用户名是否已存在

这是一个非常常见的需求，尤其是在用户注册的时候。我们可以使用 AJAX 来向服务器发送请求，检查用户名是否已存在。

const usernameInput = document.getElementById('username');

usernameInput.addEventListener('blur', function() {
  const username = this.value;

  // 发送 AJAX 请求到服务器
  fetch('/check-username?username=' + username)
    .then(response => response.json())
    .then(data => {
      if (data.exists) {
        this.setCustomValidity('用户名已存在，请选择其他用户名。');
      } else {
        this.setCustomValidity('');
      }
    })
    .catch(error => {
      console.error('Error:', error);
      this.setCustomValidity('服务器出错，请稍后再试。');
    });
});

在这个例子中，我们监听了输入框的 blur 事件（当输入框失去焦点时触发）。当用户输入完用户名后，我们会发送一个 AJAX 请求到服务器，检查用户名是否已存在。

如果用户名已存在，我们就设置一个自定义的错误信息 "用户名已存在，请选择其他用户名。"。否则，我们就清空错误信息，表示验证通过。

2. 校验密码强度

很多网站都要求用户设置强密码，以保证账户安全。我们可以使用 setCustomValidity 来校验密码强度。

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('input', function() {
  const password = this.value;
  let errorMessage = '';

  if (password.length < 8) {
    errorMessage = '密码长度必须大于 8 个字符。';
  } else if (!/[a-z]/.test(password)) {
    errorMessage = '密码必须包含小写字母。';
  } else if (!/[A-Z]/.test(password)) {
    errorMessage = '密码必须包含大写字母。';
  } else if (!/[0-9]/.test(password)) {
    errorMessage = '密码必须包含数字。';
  } else if (!/[^a-zA-Z0-9s]/.test(password)) {
    errorMessage = '密码必须包含特殊字符。';
  }

  this.setCustomValidity(errorMessage);
});

在这个例子中，我们监听了输入框的 input 事件，每次用户输入密码时，我们都会检查密码是否符合要求。如果不符合要求，我们就设置一个相应的错误信息。

3. 校验两次输入的密码是否一致

这也是一个常见的需求，尤其是在用户注册或者修改密码的时候。

const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');

confirmPasswordInput.addEventListener('input', function() {
  const password = passwordInput.value;
  const confirmPassword = this.value;

  if (password !== confirmPassword) {
    this.setCustomValidity('两次输入的密码不一致。');
  } else {
    this.setCustomValidity('');
  }
});

在这个例子中，我们监听了确认密码输入框的 input 事件，每次用户输入确认密码时，我们都会检查确认密码是否与密码一致。如果不一致，我们就设置一个自定义的错误信息 "两次输入的密码不一致。"。否则，我们就清空错误信息，表示验证通过。

4. 自定义校验规则：让你的表单与众不同

setCustomValidity 的强大之处在于，你可以根据自己的需求，自定义校验规则。

比如，假设你正在开发一个旅游网站，你希望用户选择的出发日期必须在今天之后，并且在三个月之内。

const departureDateInput = document.getElementById('departureDate');

departureDateInput.addEventListener('input', function() {
  const departureDate = new Date(this.value);
  const today = new Date();
  const threeMonthsLater = new Date();
  threeMonthsLater.setMonth(today.getMonth() + 3);

  if (departureDate < today) {
    this.setCustomValidity('出发日期必须在今天之后。');
  } else if (departureDate > threeMonthsLater) {
    this.setCustomValidity('出发日期必须在三个月之内。');
  } else {
    this.setCustomValidity('');
  }
});

在这个例子中，我们监听了出发日期输入框的 input 事件，每次用户选择日期时，我们都会检查日期是否符合要求。如果不符合要求，我们就设置一个相应的错误信息。

setCustomValidity 的最佳实践：让你的表单校验更上一层楼

提供清晰、明确的错误信息： 错误信息应该告诉用户哪里出了问题，以及如何解决。避免使用模糊、笼统的错误信息，比如 "输入错误"。
实时校验： 尽可能在用户输入时进行校验，而不是等到用户点击提交按钮后才进行校验。这样可以及时发现问题，并减少用户的挫败感。
使用合适的事件： 根据你的需求，选择合适的事件来触发校验。比如，input 事件适合实时校验，blur 事件适合在用户输入完成后进行校验。
考虑用户体验： 在设计表单校验时，要始终考虑用户体验。避免使用过于严格的校验规则，或者过于频繁的提示信息。
兼容性处理： 虽然 setCustomValidity 是 HTML5 的标准 API，但在一些老旧的浏览器中可能不支持。因此，你需要进行兼容性处理，可以使用一些 polyfill 或者库来解决这个问题。

setCustomValidity 的一些小技巧：让你的代码更优雅

封装校验函数： 将校验逻辑封装成独立的函数，可以提高代码的可读性和可维护性。
使用正则表达式： 正则表达式可以帮助你更方便地进行字符串匹配和校验。
利用 HTML5 原生的校验属性： 比如 required、pattern、min、max 等，可以减少你的代码量。
结合 CSS 来美化错误提示： 可以使用 CSS 来美化错误提示信息，使其更醒目、更友好。

总结：setCustomValidity，让你的表单不再“傻乎乎”

setCustomValidity 是一个非常强大的 JavaScript API，可以让你自定义表单元素的校验信息，从而实现一些非常复杂的校验规则。

通过合理地使用 setCustomValidity，你可以让你的表单不再“傻乎乎”，而是变得聪明、贴心，最终提升用户体验。

希望通过今天的分享，你能更好地掌握 setCustomValidity 的用法，并在你的项目中应用起来，让你的表单校验更上一层楼！

记住，一个好的表单，就像一个优秀的向导，它不仅能引导用户顺利完成填写，还能避免用户犯错，最终让用户获得愉悦的体验。而 setCustomValidity，就是你打造优秀表单的秘密武器！

HTML5 表单自定义校验：让你的表单不再“傻乎乎”

发表回复 取消回复

发表回复取消回复