当前位置：首页 > jquery

jquery 表单

2026-01-13 16:16:34jquery

jQuery 表单操作

使用 jQuery 操作表单可以简化 DOM 操作，提高开发效率。以下是一些常见的表单操作方法：

获取表单元素的值 使用 val() 方法可以获取或设置表单元素的值。

// 获取输入框的值
var username = $('#username').val();

// 设置输入框的值
$('#username').val('new value');

表单提交事件 通过 submit() 方法可以监听表单提交事件，并执行自定义逻辑。

$('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var formData = $(this).serialize(); // 序列化表单数据
    console.log(formData);
});

表单验证 使用 jQuery 可以方便地进行表单验证。

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

动态添加表单元素 可以通过 jQuery 动态添加或删除表单元素。

// 添加一个输入框
$('#formContainer').append('<input type="text" name="newField" />');

// 删除一个输入框
$('#oldField').remove();

禁用和启用表单元素 使用 prop() 方法可以禁用或启用表单元素。

// 禁用按钮
$('#submitBtn').prop('disabled', true);

// 启用按钮
$('#submitBtn').prop('disabled', false);

表单重置 通过 trigger() 方法可以重置表单。

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

jQuery 表单序列化

序列化为字符串 serialize() 方法将表单数据序列化为 URL 编码的字符串。

var data = $('#myForm').serialize();
console.log(data); // 输出：username=value&password=value

序列化为数组 serializeArray() 方法将表单数据序列化为对象数组。

var data = $('#myForm').serializeArray();
console.log(data); // 输出：[{name: 'username', value: 'value'}, ...]

Ajax 表单提交

使用 jQuery 的 ajax() 方法可以异步提交表单数据。

$('#myForm').submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: formData,
        success: function(response) {
            console.log('提交成功', response);
        },
        error: function(error) {
            console.log('提交失败', error);
        }
    });
});