使用 jQuery Form 插件完成带数据验证的 Ajax 表单

jQuery插件简介

为了增强安全性，我们通常需要在前端对表单输入值进行一些基本验证，以避免恶意提交。这时候，我们可以使用两个jQuery插件来实现这个功能：Malsup’sAjaxForm 和 Bassistance’sFormValidation。

通用Ajax表单处理

jQuery(document).ready(function($) {
  $('.simpleajaxform').each(function() {
    $(this).attr('method', 'post');
    var target = $(this).attr('target');
    var func = $(this).attr('function');
    var options = {};
    if (target || func) {
      if (target) $('#'+target).html('').hide();
      options = {
        success: simpleajaxform_success,//提交成功时的功能
        beforeSubmit: simpleajaxform_submit//提交前的功能
      };
    }
    $(this).ajaxForm(options);
  });
});

/**
*提交时:清除上一个更新并告诉用户，我们正在更新数据
*/
function simpleajaxform_submit(formData, jqForm, options) {
  if (!jqForm.valid()) return false;//如果表单没有验证通过，不能提交
  target = jqForm.attr('target');
  if (target) 
    jQuery('#'+target).html('更新中，请稍候...').removeClass('updated').addClass('updating').show();
  return true;
}

/**
*提交成功:在目标div中显示更新成功的信息
*/
function simpleajaxform_success(responseText, statusText, xhr, jQForm) {
  if (jQForm === undefined) jQForm = xhr;
  if (jQForm === undefined) {
    c-alert('不能正确处理响应');
    return;
  }
  target = jQForm.attr('target');
  if (target) 
    jQuery('#'+target).removeClass('updating').addClass('updated').html(responseText);
  hide = jQForm.attr('hide');
  if (hide) 
    jQuery('#'+hide).hide();
  handler = jQForm.attr('function');
  if (handler) 
    eval(handler+'(responseText,jQForm)');
}

创建表单

为了让WordPress能够识别出我们需要使用哪个后端功能来处理表单数据，我们需要在表单中加入WordPress后端注册的服务器事件。

<form class="simpleajaxform" action="<?php echo admin_url('admin-ajax.php');?>" target="targetdiv">
  <input type="hidden" name="action" value="my_wp_action" />//这里的值是WordPress后端的服务器动作
  <input class="required" type="text" name="message" value="" />
  <input type="submit" name="submit" value="DOSTUFF" />
</form>

在表单提交之前，我们一般会在前端对表单的输入值做一些基本验证，以避免恶意提交并提高安全性。

欢迎咨询/Welcome to inquire

tel/vx:18842938855
qq:1685522781
email:1685522781@qq.com