当前位置：首页 > JavaScript

js实现表单验证提交表单提交表单

2026-02-28 22:51:04JavaScript

表单验证的基本实现

表单验证可以通过JavaScript监听表单的提交事件，阻止默认提交行为，检查输入字段的有效性。若验证通过，手动提交表单；若验证失败，显示错误信息。

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址');
    return;
  }

  if (password.length < 6) {
    alert('密码长度不能少于6位');
    return;
  }

  this.submit();
});

实时输入验证

在用户输入时实时验证字段，提供即时反馈。可以为每个输入字段添加input或blur事件监听器。

document.getElementById('email').addEventListener('blur', function() {
  const emailError = document.getElementById('emailError');
  if (!this.value.includes('@')) {
    emailError.textContent = '请输入有效的邮箱地址';
  } else {
    emailError.textContent = '';
  }
});

使用HTML5内置验证

结合HTML5的表单验证属性，如required、pattern、minlength等，减少JavaScript代码量。

<input type="email" id="email" required>
<input type="password" id="password" minlength="6" required>

显示自定义错误信息

通过setCustomValidity方法设置自定义验证消息，覆盖浏览器默认的提示。

document.getElementById('password').addEventListener('input', function() {
  if (this.value.length < 6) {
    this.setCustomValidity('密码长度不能少于6位');
  } else {
    this.setCustomValidity('');
  }
});

异步验证

对于需要与服务器交互的验证（如用户名是否已存在），可以使用fetch进行异步验证。

document.getElementById('username').addEventListener('blur', function() {
  fetch('/check-username?username=' + this.value)
    .then(response => response.json())
    .then(data => {
      if (data.exists) {
        document.getElementById('usernameError').textContent = '用户名已存在';
      }
    });
});

验证库的使用

对于复杂表单，可以使用现成的验证库如Validator.js或Yup，简化验证逻辑。

import * as yup from 'yup';

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(6).required()
});

schema.validate(formData)
  .then(() => form.submit())
  .catch(err => alert(err.errors[0]));

防止多次提交

在表单提交时禁用提交按钮，防止用户多次点击导致重复提交。

document.getElementById('myForm').addEventListener('submit', function() {
  const submitBtn = document.getElementById('submitBtn');
  submitBtn.disabled = true;
});

验证全部通过后提交

收集所有字段的验证状态，只有全部通过时才允许提交表单。

js实现表单验证提交表单提交表单

function validateForm() {
  const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
  const isPasswordValid = password.value.length >= 6;
  return isEmailValid && isPasswordValid;
}

form.addEventListener('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault();
    alert('请正确填写所有字段');
  }
});