分享纯手写漂亮的表单验证

2023年6月10日下午6:51 • JavaScript

下面是关于如何分享纯手写漂亮的表单验证的完整攻略：

1. 为什么需要表单验证

在网站开发中，表单是非常重要的交互方式之一。表单用于收集和提交用户的数据，因此表单验证是非常必要的。表单验证可以确保用户输入的数据满足我们的需求，比如确保用户的邮箱格式正确、密码符合规范等。如果没有表单验证，那么用户可能会输入错误或者恶意的数据，造成网站数据的被破坏，或者影响用户使用体验。

2. 纯手写表单验证的优点

虽然市面上有很多表单验证插件，但是纯手写表单验证也有很多优点：

学习成本低：基于一些基础知识，只需要了解相关代码就可以手写表单验证了，很多时候不需要使用复杂的插件；
更加定制化：手写表单验证可以更加灵活方便的根据需求进行修改和扩展而不需要受限于插件的功能；
代码质量更高：手写表单验证可以让代码更加简洁和高效，并且可以减少不必要的依赖，并保证代码质量高和执行效率。

3. 表单验证的实现方式

表单验证可以通过多个方式来进行实现。以下是两个非常常用的方法：

3.1 使用HTML5的表单验证

HTML5提供了一些表单验证的属性和API，可以直接使用来进行表单验证。比如可以使用required属性来规定输入框必须被填写，使用type="email"属性来验证用户是否输入了正确的邮箱地址。以下是一个使用HTML5表单验证的示例：

<form action="submit.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" pattern=".{8,}" title="Must contain at least 8 characters" required>

    <button type="submit">Submit</button>
</form>

在上述示例中，required属性规定了输入框必须填写，并且如果用户未填写会出现提示。type="email"属性则用来验证用户输入的是否是正确格式的邮箱地址。

3.2 使用JavaScript手写表单验证

除了使用HTML5，我们也可以通过手写JavaScript代码来进行表单验证。以下是一个使用JavaScript手写表单验证的示例：

<form action="submit.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span id="email-error" class="error"></span>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <span id="password-error" class="error"></span>

    <button type="submit">Submit</button>
</form>

var form = document.querySelector('form');
var email = document.querySelector('#email');
var emailError = document.querySelector('#email-error');
var password = document.querySelector('#password');
var passwordError = document.querySelector('#password-error');

form.addEventListener('submit', function(e) {
  if (email.validity.valid && password.validity.valid) {
    // 表单验证通过，可以提交表单
  } else {
    e.preventDefault();
    if (!email.validity.valid) {
      emailError.textContent = '请输入正确的邮箱地址';
    }
    if (!password.validity.valid) {
      passwordError.textContent = '请输入至少8位密码';
    }
  }
});

email.addEventListener('input', function(e) {
  if (email.validity.valid) {
    emailError.textContent = '';
  } else {
    emailError.textContent = '请输入正确的邮箱地址';
  }
});

password.addEventListener('input', function(e) {
  if (password.validity.valid) {
    passwordError.textContent = '';
  } else {
    passwordError.textContent = '请输入至少8位密码';
  }
});

在上述示例中，我们通过监听表单submit事件来检验表单输入是否符合要求。如果符合要求，则可以提交表单；如果不符合要求，则阻止表单提交，并在错误的输入框下方显示错误提示。同时，我们还通过监听input事件来即时检测用户的输入是否符合要求。

4. 表单验证的优化

及时的反馈（UI效果）：采用视觉效果表明是否通过验证，即时的反馈对体验来说很重要。
简单的操作：客户不想要太多打字或操作，所有都更好都自动化甚至所有都使用下拉框和单选按钮更好，如果必须要使用输入框，也建议内置联想功能，客户就不必输很多字。
尽量避免复杂的验证规则：虽然开发人员可以依据各种特定规则进行验证，但是用户无法预料这些特定规则，而且在遇到一定的信任度危机时也无法接受，因此建议只使用通用的规则对用户进行验证并区分出错误。
帮助他们改正错误：在验证发现用户有错误时，尽可能情况下把错误原因告诉用户，并提供改正的方案，给他们一种易于接受的方式改正错误。
短语化的指引：使表单或验证指引直接简短而重点突出，不要把表单和指引进行过多而复杂的表述。