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

表单提交之前，一般我们要在前端对表单的输入值做一些基本验证，以避免恶意提交，并提高安全性。我们可以通过两个 jQuery 插件实现这两个功能：Malsup’s AjaxForm 和 Bassistance’s Form Validation。

/**
 * 通用Ajax表单处理
 */
jQuery(document).ready(function($){
 $('.simpleajaxform').each(function(){
  $(this).attr('method', 'post');
  var target = $(this).attr('target');
  var func   = $(this).attr('function');
  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 才能识别需要用后台的哪个功能处理提交的表单数据。

 //这里的值是WordPress后端的服务器动作