10个常用的表单处理函数及实际应用案例

1. .serialize()：将表单元素的值序列化为URL编码的字符串。可以用于将表单内容通过AJAX请求发送到服务器。

实际应用案例：将用户在注册表单中输入的数据通过AJAX请求发送到服务器进行保存。

$("form").submit(function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
  $.ajax({
    url: "/register",
    type: "POST",
    data: formData,
    success: function(response) {
      // 处理服务器返回的响应
    }
  });
});

2. .val()：获取或设置表单元素的值。可以用于获取用户在表单中输入的数据或设置默认值。

实际应用案例：在搜索框中获取用户输入的关键词。

$("#search").click(function() {
  var keyword = $("#search-input").val();
  // 处理搜索逻辑
});

3. .prop()：获取或设置表单元素的属性值。可以用于设置表单元素的禁用状态或勾选状态。

实际应用案例：禁用某个表单元素直到满足特定条件。

$("#submit").prop("disabled", true);

$("#agree-checkbox").change(function() {
  if ($(this).is(":checked")) {
    $("#submit").prop("disabled", false);
  } else {
    $("#submit").prop("disabled", true);
  }
});

4. .submit()：提交表单。可以用于手动触发表单的提交操作。

实际应用案例：在某个按钮点击时手动提交表单。

$("#register-button").click(function() {
  $("form").submit();
});

5. .reset()：重置表单。可以用于将表单元素的值重置为默认状态。

实际应用案例：在点击重置按钮时重置表单。

$("#reset-button").click(function() {
  $("form").reset();
});

6. .serializeArray()：将表单元素的值序列化为一个数组，每个数组项包含一个对象表示一个表单元素及其值。

实际应用案例：将表单数据转换为JSON格式。

$("form").submit(function(event) {
  event.preventDefault();
  var formDataArray = $(this).serializeArray();
  var formDataJson = {};

  for (var i = 0; i < formDataArray.length; i++) {
    formDataJson[formDataArray[i].name] = formDataArray[i].value;
  }

  $.ajax({
    url: "/register",
    type: "POST",
    data: JSON.stringify(formDataJson),
    success: function(response) {
      // 处理服务器返回的响应
    }
  });
});

7. .serializeJSON()：将表单元素的值序列化为JSON格式的字符串。

实际应用案例：将表单数据转换为JSON格式并发送到服务器。

$("form").submit(function(event) {
  event.preventDefault();
  var formDataJson = $(this).serializeJSON();

  $.ajax({
    url: "/register",
    type: "POST",
    data: JSON.stringify(formDataJson),
    success: function(response) {
      // 处理服务器返回的响应
    }
  });
});

8. .closest()：查找当前元素的最近的匹配选择器的父元素。

实际应用案例：在表单验证时找到包含表单元素的父元素并添加错误提示。

$("form").submit(function(event) {
  event.preventDefault();
  var $inputs = $(this).find("input");

  $inputs.each(function() {
    var $parent = $(this).closest(".form-group");

    // 验证表单元素

    if (error) {
      $parent.addClass("has-error");
      $parent.append("<span class='error-message'>请输入有效的值</span>");
    } else {
      $parent.removeClass("has-error");
      $parent.find(".error-message").remove();
    }
  });
});

9. .each()：遍历匹配元素集合中的每个元素。

实际应用案例：将表单元素的值存储在数组中。

var formValues = [];

$("form input").each(function() {
  formValues.push($(this).val());
});

10. .not()：从匹配元素集合中删除指定的元素。

实际应用案例：在表单验证时排除某些表单元素。

$("form input").not(":checkbox").each(function() {
  // 验证表单元素
});