处理ajax表单验证结果,使用 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后端的服务器动作