使用jQuery实现表单数据验证

$(document).ready(function() {
    // 表单提交事件
    $('form').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        // 清除之前的错误提示
        $('.form-group').removeClass('has-error');
        $('.help-block').empty();
 
        // 检查用户名和密码
        var username = $('#username').val();
        var password = $('#password').val();
 
        if (username.trim() === '') {
            $('#username-group').addClass('has-error');
            $('#username-help').text('用户名不能为空');
        }
        if (password.trim() === '') {
            $('#password-group').addClass('has-error');
            $('#password-help').text('密码不能为空');
        }
 
        // 如果没有错误，则允许提交
        if ($('.form-group.has-error').length === 0) {
            $(this).off('submit').submit(); // 移除事件监听并允许提交
        }
    });
});

这段代码在表单提交时阻止默认行为，并检查用户名和密码是否为空。如果为空，则向对应的表单组添加错误类并显示错误信息；只有当没有错误时，才允许表单提交。