JQUERY获取form表单值的代码

获取form表单值是jQuery中非常常见的操作，下面是一份完整攻略。

步骤一：定义form表单

定义方式如下：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" value="Jack"><br>
  <label for="gender">性别：</label>
  <input type="radio" id="gender" name="gender" value="male" checked>男
  <input type="radio" id="gender" name="gender" value="female">女<br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" value="[e-mail]"><br>
  <label for="address">地址：</label>
  <textarea id="address" name="address" rows="3" cols="40">上海市浦东新区</textarea><br>
  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="shanghai" selected>上海</option>
    <option value="beijing">北京</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</form>

步骤二：获取form表单的值

方式一：使用.serialize()方法

jQuery中提供了一个方便的方法来序列化form表单的值，即.serialize()方法。

$('form').submit(function(event) {
  event.preventDefault(); // 阻止提交表单的默认行为
  var formValues = $(this).serialize();
  console.log(formValues);
});

结果输出如下：

name=Jack&gender=male&email=jack%40example.com&address=%E4%B8%8A%E6%B5%B7%E5%B8%82%E6%B5%A6%E4%B8%9C%E6%96%B0%E5%8C%BA&city=shanghai

方式二：逐个获取表单元素的值

如果需要逐个获取表单元素的值，可以使用以下代码：

$('form').submit(function(event) {
  event.preventDefault(); // 阻止提交表单的默认行为
  var name = $('input[name="name"]').val(); // 获取姓名
  var gender = $('input[name="gender"]:checked').val(); // 获取性别
  var email = $('input[name="email"]').val(); // 获取邮箱
  var address = $('textarea[name="address"]').val(); // 获取地址
  var city = $('select[name="city"]').val(); // 获取城市
  console.log('姓名：' + name);
  console.log('性别：' + gender);
  console.log('邮箱：' + email);
  console.log('地址：' + address);
  console.log('城市：' + city);
});

输出结果如下：

姓名：Jack
性别：male
邮箱：[e-mail]
地址：上海市浦东新区
城市：shanghai

示例说明

假设现在我们需要验证表单中的邮箱格式是否正确，并在点击“提交”按钮后将表单的值发送给后端保存。

示例一

使用方式一：

$('form').submit(function(event) {
  event.preventDefault(); // 阻止提交表单的默认行为
  var formValues = $(this).serialize();
  // 验证邮箱格式是否正确
  var email = $('input[name="email"]').val();
  var emailReg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-z]+$/;
  if (!emailReg.test(email)) {
    alert('邮箱格式不正确');
    return false;
  }
  // 发送表单数据给后端
  $.ajax({
    type: 'post',
    url: '/save',
    data: formValues,
    success: function() {
      alert('保存成功');
    },
    error: function() {
      alert('保存失败');
    }
  });
});

示例二

使用方式二：

$('form').submit(function(event) {
  event.preventDefault(); // 阻止提交表单的默认行为
  // 验证邮箱格式是否正确
  var email = $('input[name="email"]').val();
  var emailReg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-z]+$/;
  if (!emailReg.test(email)) {
    alert('邮箱格式不正确');
    return false;
  }
  // 准备发送的数据
  var data = {
    name: $('input[name="name"]').val(),
    gender: $('input[name="gender"]:checked').val(),
    email: email,
    address: $('textarea[name="address"]').val(),
    city: $('select[name="city"]').val()
  };
  // 发送表单数据给后端
  $.ajax({
    type: 'post',
    url: '/save',
    data: data,
    success: function() {
      alert('保存成功');
    },
    error: function() {
      alert('保存失败');
    }
  });
});

以上两个示例仅供参考，具体的校验和保存方式可以根据实际需求进行调整。