当前位置：首页 > JavaScript

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

2026-03-01 00:11:28JavaScript

表单验证的基本实现

使用JavaScript进行表单验证时，通常需要监听表单的提交事件，阻止默认提交行为，验证输入内容，最后决定是否提交表单。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    if (username.trim() === '') {
        alert('用户名不能为空');
        return;
    }

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

    this.submit(); // 验证通过后提交表单
});

实时验证输入内容

在用户输入时进行实时验证，提供即时反馈。

document.getElementById('username').addEventListener('input', function() {
    const errorElement = document.getElementById('usernameError');
    if (this.value.trim() === '') {
        errorElement.textContent = '用户名不能为空';
    } else {
        errorElement.textContent = '';
    }
});

使用正则表达式验证复杂格式

对于邮箱、电话号码等复杂格式的验证，可以使用正则表达式。

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

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

使用HTML5内置验证

结合HTML5的内置验证属性，可以减少JavaScript代码量。

<input type="email" id="email" required pattern="[^\s@]+@[^\s@]+\.[^\s@]+">

异步验证

对于需要服务器端验证的情况，可以使用AJAX进行异步验证。

document.getElementById('username').addEventListener('blur', function() {
    const username = this.value;
    const errorElement = document.getElementById('usernameError');

    if (username.trim() === '') {
        errorElement.textContent = '用户名不能为空';
        return;
    }

    fetch('/check-username?username=' + encodeURIComponent(username))
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                errorElement.textContent = '用户名已存在';
            } else {
                errorElement.textContent = '';
            }
        });
});

表单提交处理

验证通过后，可以使用FormData对象收集表单数据并提交。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();

    if (!validateForm()) {
        return;
    }

    const formData = new FormData(this);

    fetch('/submit-form', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        alert('提交成功');
    })
    .catch(error => {
        alert('提交失败');
    });
});

验证函数封装

将验证逻辑封装成可复用的函数，提高代码的可维护性。

function validateForm() {
    let isValid = true;

    // 验证用户名
    const username = document.getElementById('username').value;
    if (username.trim() === '') {
        document.getElementById('usernameError').textContent = '用户名不能为空';
        isValid = false;
    }

    // 验证密码
    const password = document.getElementById('password').value;
    if (password.length < 6) {
        document.getElementById('passwordError').textContent = '密码长度不能少于6位';
        isValid = false;
    }

    return isValid;
}

错误提示样式

使用CSS为错误提示添加样式，提升用户体验。

.error-message {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
}

防止重复提交

在表单提交过程中禁用提交按钮，防止重复提交。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const submitButton = document.getElementById('submitButton');
    submitButton.disabled = true;

    // 验证和提交逻辑

    // 提交完成后可以重新启用按钮
    // submitButton.disabled = false;
});

这些方法可以根据实际需求组合使用，构建出健壮的表单验证和提交功能。

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