使用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(); // 移除事件监听并允许提交
        }
    });
});