当前位置：首页 > jquery

表单 jquery

2026-03-17 13:00:56jquery

使用 jQuery 操作表单

jQuery 提供了多种方法来简化表单操作，包括获取表单数据、验证表单、动态修改表单元素等。以下是常见的 jQuery 表单操作示例：

获取表单数据

可以通过 serialize() 或 serializeArray() 方法获取表单数据：

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

表单验证

使用 jQuery 可以轻松实现客户端表单验证：

$('#myForm').submit(function(event) {
  var email = $('#email').val();
  if (!email.includes('@')) {
    alert('请输入有效的电子邮件地址');
    event.preventDefault();
  }
});

动态修改表单

jQuery 允许动态添加或删除表单元素：

$('#addField').click(function() {
  $('#myForm').append('<input type="text" name="newField">');
});

AJAX 表单提交

可以使用 jQuery 的 AJAX 方法异步提交表单：

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

常用表单事件

jQuery 提供了专门针对表单的事件处理：

$('input').focus(function() {
  $(this).css('background-color', '#ffffcc');
});

$('input').blur(function() {
  $(this).css('background-color', 'white');
});

$('input').change(function() {
  console.log('值已更改: ' + $(this).val());
});

表单元素操作

jQuery 可以方便地操作各种表单元素：

复选框和单选按钮

// 获取选中的复选框值
$('input[type="checkbox"]:checked').each(function() {
  console.log($(this).val());
});

// 设置单选按钮选中
$('input[type="radio"][value="option1"]').prop('checked', true);

下拉菜单

// 获取选中的值
var selectedValue = $('#mySelect').val();

// 设置选中项
$('#mySelect').val('option2');

// 添加选项
$('#mySelect').append('<option value="newOption">新选项</option>');