js浏览器html5表单验证

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

下面是“JS浏览器HTML5表单验证”的完整攻略。

1. 前言

HTML5表单验证是一个Web开发中非常重要的组成部分，而这些验证可以使用HTML5的属性来完成。但是这些验证可能无法满足开发人员的特定需求，所以我们需要使用JavaScript来完成这个工作。在这里，我们将学习如何使用javascript实现HTML5表单验证。

2. 表单中常用的验证

HTML5表单验证中有很多种选择，但是其中一些特别常见，下面我们将一些常用验证进行介绍。

2.1 必填项验证

在HTML5表单验证中，可以使用required属性来表示是否必须填写某一输入框。但是如果需要进行更多的自定义验证，那么可以使用JavaScript来完成。

例如，在下面的代码中，我们可以检查username是否为空。如果为空，则显示错误消息并在事件中return false，以防止提交表单。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <span id="usernameError"></span>
  <button type="submit" onclick="validateUsername()">提交</button>
</form>

<script>
  function validateUsername() {
    const username = document.getElementById("username");
    const error = document.getElementById("usernameError");

    if (username.value.trim() === "") {
      error.innerText = "用户名不能为空";
      return false;
    } else {
      error.innerText = "";
      return true;
    }
  }
</script>

2.2 密码验证

密码验证是表单验证中的另一个常见问题，通常需要检查密码是否符合标准，例如长度是否达到最小值等。

在下面的代码中，我们可以检查密码是否包含大小写字母、数字和符号，并且密码长度必须至少为8个字符。如果条件不满足，则显示错误消息并防止提交表单。

<form>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <span id="passwordError"></span>
  <button type="submit" onclick="validatePassword()">提交</button>
</form>

<script>
  function validatePassword() {
    const password = document.getElementById("password");
    const error = document.getElementById("passwordError");
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>?"'\\/])[A-Za-z\d!@#$%^&*()\-_=+{};:,<.>?"'\\/]{8,}$/;

    if (!password.value.match(regex)) {
      error.innerText = "密码必须包括大小写字母、数字和符号，并且长度必须至少为8个字符";
      return false;
    } else {
      error.innerText = "";
      return true;
    }
  }
</script>

2.3 电子邮件验证

电子邮件验证用于检查邮箱地址是否符合指定的格式，确保填写的是正确的邮箱地址。

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <span id="emailError"></span>
  <button type="submit" onclick="validateEmail()">提交</button>
</form>

<script>
  function validateEmail() {
    const email = document.getElementById("email");
    const error = document.getElementById("emailError");

    if (!email.checkValidity()) {
      error.innerText = "请输入有效的电子邮件地址";
      return false;
    } else {
      error.innerText = "";
      return true;
    }
  }
</script>