使用 HTML 和 JavaScript 进行表单验证

在网站或应用程序的表单中，输入合法性的验证是非常重要的。否则，用户可能会输入无效、错误的数据，甚至可能会导致系统崩溃或被攻击。而 HTML 和 JavaScript 是前端开发中非常常用的工具，也可以用来进行表单验证。

HTML 表单验证

HTML 表单验证提供了一些验证规则，在用户提交表单时会自动进行验证，如果不符合规则就会提示用户。例如：

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <input type="submit" value="提交">
</form>

在上例中，使用了 required 属性来表示该字段必填，如果用户没有输入用户名或密码就提交表单，会弹出提示。另外，密码输入框中还设置了 minlength 属性，表示密码必须至少 8 个字符。

HTML 表单验证的优点是简单易用，但是对于一些特定的验证规则还是不够灵活，无法满足需求。这时可以使用 JavaScript 进行自定义验证。

JavaScript 表单验证

在网站或应用程序的表单中，JavaScript 可以用来进行自定义验证。例如：

<form>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">

  <label for="phone">手机号:</label>
  <input type="tel" id="phone" name="phone">

  <input type="submit" value="提交" onclick="return validateForm()">
</form>

<script>
function validateForm() {
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // 验证邮箱
  if (email && !/\S+@\S+\.\S+/.test(email)) {
    alert("请输入合法的邮箱！");
    return false;
  }

  // 验证手机号
  if (phone && !/^1[0-9]{10}$/.test(phone)) {
    alert("请输入合法的手机号码！");
    return false;
  }

  // 验证通过
  return true;
}
</script>

在上例中，使用了 onclick 事件来调用 validateForm() 函数。该函数首先获取用户输入的邮箱和手机号，并通过正则表达式进行验证。如果验证不通过，就弹出提示并返回 false，阻止表单提交。如果验证通过，就返回 true，允许表单提交。

使用 JavaScript 进行表单验证的优点是可以满足更为灵活的验证需求。缺点是需要编写代码并处理许多边缘情况，也容易出现安全问题。所以，建议在前端验证的基础上，后端也进行一次验证，以确保数据的安全性。

总结

在网站或应用程序的表单中，输入合法性的验证非常重要，可以使用 HTML 和 JavaScript 进行验证。HTML 表单验证简单易用，但对于一些特定的验证规则有限。JavaScript 可以用来进行更灵活的验证，但需要编写代码并处理边缘情况。建议前端验证的基础上，后端也进行一次验证，以确保数据的安全性。