在上边的验证中使用到了checkLength()方法和checkReg方法，这两个方法分别都是自定义方法，分别是验证字段长度和通过正则表达式验证输入是否合法的方法，在jQueryUI官方提供的Demo里也有相应的方法，我在这里对方法做修改，因为官方的DEMO中当验证失败后，重新打开DIALOG时，验证失败的提示信息和错误样式都还保存着。而我写的方法已经做了修改。不会有这样的问题，下面是checkLength和checkReg方法，方法的注释我写的很清楚了，不再解释，我会说下关于添加错误CSS样式的东西。

//判断字段长度是否符合要求的方法,四个参数分别为：o被检测的对象,msg被检测对象显示名称

//min允许的最小长度,max允许的最大长度

function checkLength(o,msg,min,max){

if(o.val().length > max || o.val().length < min){

o.addClass("ui-state-error");//为当前的错误域添加CSS样式

updateTip(msg+"的长度必须在"+min+"到"+max+"之间");//更新提示区域的信息

return false;

}else{

//如果验证通过则移除当前对象的CSS错误样式

o.removeClass("ui-state-error");

return true;

}

}

//通过正则表达式验证内容的方法,o为表单域对象,reg为正则表达式,n为错误提示信息

function checkReg(o,reg,n){

if(!reg.test(o.val())){

o.addClass("ui-state-error");

updateTip(n);

return false;

}else{

o.removeClass("ui-state-error");

return true;

}

}

在这两个方法中都用到了一个updateTip方法，该方法的作用就是给那个<p>标签也就是错误消息显示的地方添加一个css样式，用来高亮提示用户的。方法如下：

//更新提示信息的方法，传递的参数t为显示的错误信息，然后为显示信息的标签添加高亮

function updateTip(t){

tips.text(t).addClass("ui-state-highlight");

}

验证的过程就是如上面显示的那样，方法都有比较详细的注释，大家可以自己看

当用户输入的都被我们验证，并通过后，应该像后台发起ajax请求了。具体代码如下：

此处用到了一个formSerialize()方法，是一个jquery.form.js的脚本文件，针对表单的一个jq插件，可以序列化表单，这样我们只需要把序列化后的值传递给后台就行，不用一个个获取再拼接了。如果需要用到请自行引入该脚本

if(chk){

//验证通过后移除提示处的样式和错误消息

tips.removeClass().text("");

//序列化表单

var user = $("#reg-form").formSerialize();

//发起ajax请求

$.ajax({

type:'post',

url: '${path}/UserAction?method=register',

data:user,

success:function(msg){

if(msg == "success"){

$("#register-form").dialog("close");

}else{

alert("服务器异常,请稍后再试");

}

},

error:function(){

alert("ajax请求失败");

}

});

}

整个的注册流程就是这样，当注册完成后会关闭dialog,下面的图片显示当验证出现错误时的样式