jQuery form插件之formDdata参数校验表单及验证后提交

下面是详细讲解“jQuery form插件之formData参数校验表单及验证后提交”的完整攻略。

什么是jQuery form插件?

jQuery form插件是一个可以方便处理表单提交的jQuery插件，它简化了表单提交时的Ajax处理，并提供了一些表单处理辅助功能。

什么是formData参数

formDataparams刷新时将用于测试表单中所有可用的手段，例如设置的“数据”参数以下列方式之一来扩展请求数据对象（对象已序列化）。

1.与name的值合并。
2.作为顶级对象使用（如果是对象类型）。
3.作为表单数据键值对数组中的一个额外参数。
当data参数是数组时，jQuery 会在内部以 .serialize() 将其序列化。例如，可以使用以下方法将所有表单字段的值同时传递给服务器。

$(document).on('click','#submit',function(){
  $('form').ajaxSubmit({
    type:'post',
    url:'xxx.php',
    dataType:'json',
    data:$('form').serialize()+'&type=a',
    success:function(data){
      console.log(data);
    },
    error:function(err){
      console.log(err);
    }
  });
});

在这里我们使用了serialize()对表单数据进行序列化，而formData参数则是在与之一起使用时对表单数据进行扩展的。

formData参数校验表单及验证后提交

当使用formData参数来提交表单时，我们可以对表单中的数据进行校验，并在校验通过后再做提交。下面是使用formData参数进行表单校验及提交的详细步骤。

步骤一：引入jQuery和jQuery form插件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

步骤二：编写表单HTML代码

<form method="post" action="demo.php" id="form">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  <input type="submit" id="submit" value="提交">
</form>

步骤三：编写jQuery代码

$(document).on('click','#submit',function(){
  // 对输入框的值进行校验
  if($('#username').val().length<6){
    alert('用户名长度不能少于6位！');
    return false;
  }
  if($('#password').val().length<6){
    alert('密码长度不能少于6位！');
    return false;
  }
  // 使用formData参数提交表单
  $('#form').ajaxSubmit({
    type: 'post',
    url: 'demo.php',
    dataType: 'json',
    data: {
      formData: true // 添加formData参数
    },
    success: function(data){
      console.log(data);
    },
    error: function(xhr){
      console.log(xhr.responseText);
    }
  });
  return false;
});

这段代码中，我们首先对输入框的值进行了校验，如果校验不通过则不做提交，否则使用formData参数提交表单数据。

示例一：根据表单的name属性自动校验及提交表单

<form method="post" action="demo.php" id="form2">
  <label for="username2">用户名：</label>
  <input type="text" id="username2" name="username2" data-required="true"
         data-msg-required="用户名不能为空"
         data-minlength="6" data-msg-minlength="用户名长度不能小于6位"><br>
  <label for="password2">密码：</label>
  <input type="password" id="password2" name="password2" data-required="true"
         data-msg-required="密码不能为空"
         data-minlength="6" data-msg-minlength="密码长度不能小于6位"><br>
  <input type="submit" id="submit2" value="提交">
</form>

这里我们在输入框上使用了data-*属性来指定校验规则。例如，data-required="true"表示该输入框内容不能为空，data-msg-required="用户名不能为空"表示当该输入框内容为空时需要提示的错误信息。我们可以根据这些规则自动进行表单校验。

$(function(){
  // 对form2表单中的输入框进行校验
  $('#form2').find(':input').each(function(){
    var $this = $(this);
    if($this.data('required')){
      $this.rules('add', {
        required: true,
        messages: {
          required: $this.data('msg-required')
        }
      });
    }
    if($this.data('minlength')){
      $this.rules('add', {
        minlength: $this.data('minlength'),
        messages: {
          minlength: $this.data('msg-minlength')
        }
      });
    }
  });
  // 使用formData参数提交表单
  $('#form2').ajaxForm({
    url: 'demo.php',
    dataType: 'json',
    data: {
      formData: true
    },
    beforeSubmit: function(arr,$form,options){
      // 表单校验
      if($('#form2').valid()){
        return true;
      }else{
        return false;
      }
    },
    success: function(data){
      console.log(data);
    },
    error: function(xhr){
      console.log(xhr.responseText);
    }
  });
});

这段代码中，我们使用了jQuery.validate插件对表单进行了校验。可以看到我们使用$('#form2').find(':input').each()对所有输入框进行了遍历，并根据输入框上的data-*属性添加了对应的规则。并在beforeSubmit回调函数中调用$('#form2').valid()方法进行表单校验。

示例二：使用jQuery.validate插件手动校验表单及提交

<form method="post" action="demo.php" id="form3">
  <label for="username3">用户名：</label>
  <input type="text" id="username3" name="username3"><br>
  <label for="password3">密码：</label>
  <input type="password" id="password3" name="password3"><br>
  <input type="submit" id="submit3" value="提交">
</form>

$(function(){
  // 使用jQuery.validate插件对表单进行手动校验
  $('#form3').validate({
    rules: {
      username3: {
        required: true,
        minlength: 6
      },
      password3: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      username3: {
        required: '用户名不能为空',
        minlength: '用户名长度不能小于6位'
      },
      password3: {
        required: '密码不能为空',
        minlength: '密码长度不能小于6位'
      }
    },
    submitHandler: function(form){
      // 使用formData参数提交表单
      $(form).ajaxSubmit({
        url: 'demo.php',
        dataType: 'json',
        data: {
          formData: true
        },
        success: function(data){
          console.log(data);
        },
        error: function(xhr){
          console.log(xhr.responseText);
        }
      });
    }
  });
});

这段代码中，我们首先使用jQuery.validate插件对表单进行了手动校验，并指定了校验规则及错误提示信息。在submitHandler回调函数中，我们使用formData参数提交表单数据。

总结

通过本文的讲解，我们了解了jQuery form插件中的formData参数，并使用该参数对表单数据进行校验及提交。同时，我们也学习到了两种不同的表单校验方式，一种是通过data-*属性自动校验表单，另一种是使用jQuery.validate插件手动校验表单。这些方法可以让我们更加方便地处理表单数据，并有效地提高开发效率。