在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)

代码如下:

javascript当中声明两个全局数组

代码如下:
var controlId = new Array(); //保存验证不通过的控件ID
var errors = new Array() ; //保存验证不通过的提示信息

思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时 将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.

代码如下:
$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls") ;
//表单提交时
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
return false ;
}) ;
//失去焦点时验证控件
valControls(ajaxForm2Controls) ;
});

表单提交方法:

代码如下:
function ajaxForm2Control(obj) {
//当存在错误信息时返回,找显示错误信息
if(controlId.length > 0) {
alertinfo() ;
return false ;
}
if(!$(obj).validationEngine("validate")) return false; //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)
$.ajax({
type: "POST",
url: $(obj).attr("action"),
data: $(obj).serialize(),
dataType: "html",
success: function(data){
xxxxxx
}
});
}

为表单添加焦点事件

代码如下:
//表单需要验证的控件
function valControls(ajaxForm2Controls) {
//获取需要使用ajax验证的控件
var controlsStr = ajaxForm2Controls.attr("control") ;
//属性未定义时返回
if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;
//分隔获取控件ID
var controls = controlsStr.split(/,/g) ;
for(var i in controls) {
//添加焦点离开事件
$("#" + controls[i]).blur(function() {
if($(this).val().length <= 0) return false;
//重新设置数组
controlId.length = 0;
errors.length = 0 ;
//错误信息
var error = $(this).attr("error") ;
$.ajax({
type: "GET",
url: $(this).attr("url"),
data: $(this).serialize(),
dataType: "text",
success: function(data){
if(data==="true") {
//验证不通过将错误信息放入数组中
controlId.push(controls[i]);
errors.push(error) ;
//提示信息
alertinfo() ;
}
}
});
}) ;
}
}

错误提示信息:

代码如下:
//弹出信息
function alertinfo() {
if(controlId.length > 0) {
for(var i in controlId) {
//validationEngine方法,为指定ID弹出提示.
//用法:$("#id").validationEngine("showPrompt","提示内容","load");
//在该元素上创建一个提示，3 种状态："pass", "error", "load"
$("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");
}
}
}

这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.