javascript表单验证触发_代码示例

温馨提示：这篇文章已超过246天没有更新，请注意相关的内容是否还可用！

JavaScript表单验证是一种用于检查用户输入的技术，以确保输入的数据符合特定的要求。通过在表单提交之前触发验证函数，可以防止无效或不完整的数据被提交到服务器。

以下是一个示例代码，演示了如何使用JavaScript进行表单验证。在这个例子中，我们将验证一个简单的登录表单，要求用户输入一个有效的用户名和密码。

我们需要在HTML中定义一个表单，并为每个输入字段指定一个唯一的ID。然后，我们可以使用JavaScript来获取这些输入字段的值，并进行验证。


<form id="loginForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <input type="submit" value="登录">
</form>

在JavaScript中，我们可以使用`addEventListener`方法来为表单的提交事件添加一个监听器。当用户点击提交按钮时，我们将触发验证函数`validateForm`。


document.getElementById("loginForm").addEventListener("submit", validateForm);
function validateForm(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();
  // 获取用户名和密码的值
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  // 进行验证
  if (username === "" || password === "") {
    alert("请输入用户名和密码");
    return false;
  } else {
    // 验证通过，可以提交表单
    alert("验证通过，表单已提交");
    document.getElementById("loginForm").submit();
  }
}