当前位置：首页 > jquery

jquery 表单

2026-03-02 10:45:05jquery

jQuery 表单操作

jQuery 提供了丰富的 API 用于处理表单元素，包括获取表单值、表单验证、动态修改表单内容等。以下是一些常见的 jQuery 表单操作方法：

获取表单输入值

使用 val() 方法可以获取或设置表单元素的值。例如，获取文本框的值：

var username = $('#username').val();

设置复选框的选中状态：

$('#checkbox').val('new-value');

表单提交事件

通过 submit() 方法可以监听表单提交事件，并阻止默认提交行为：

$('#myForm').submit(function(event) {
    event.preventDefault();
    // 自定义提交逻辑
});

表单验证

结合 jQuery 可以实现客户端表单验证。例如，检查输入是否为空：

$('#myForm').submit(function(event) {
    if ($('#username').val() === '') {
        alert('用户名不能为空');
        event.preventDefault();
    }
});

动态修改表单

使用 jQuery 可以动态添加或移除表单元素。例如，添加一个新的输入框：

$('#formContainer').append('<input type="text" name="newField" />');

序列化表单数据

serialize() 方法可以将表单数据序列化为 URL 编码的字符串，适合用于 AJAX 提交：

var formData = $('#myForm').serialize();
$.post('submit.php', formData, function(response) {
    console.log(response);
});

表单重置

使用 trigger() 方法可以重置表单：

$('#myForm').trigger('reset');

示例：AJAX 表单提交

以下是一个完整的 AJAX 表单提交示例：

$('#myForm').submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: formData,
        success: function(response) {
            $('#result').html(response);
        }
    });
});