jQueryUI教程之dialog的使用.docx

上边的div中显示的就是注册表单的内容。

一共四项。

然后来看如何对这些数据进行验证，验证代码如下：

//注册表单相关函数和验证

//获取name,password,email和birth对象并将对象添加到一个空对象中备用

varuname=$（"#uname"）,

password=$（"#upass"）,

email=$（"#email"）,

birth=$（"#birth"）,

fields=$（[]）.add（uname）.add（password）.add（email）,

tips=$（".validateTips"）;

$（"#register-form"）.dialog（{

//打开对话框的时候移除表单域的样式并设置错误信息显示文本为默认值

open:

function（）{

tips.removeClass（）.text（"所有的表单域都为必填项."）;

fields.removeClass（"ui-state-error"）;

fields.val（""）;

},

modal:

true,//弹出带有遮罩的模式窗体

autoOpen:

false,//不自动打开

buttons:

{

提交:

function（）{

//点击提交按钮时执行的事件

varchk=true;

//验证字段长度是否符合要求

chk=chk&&checkLength（uname,"username",2,15）;

chk=chk&&checkLength（password,"password",6,20）;

chk=chk&&checkLength（email,"email",6,40）;

chk=chk&&checkLength（birth,"birthday",8,10）;

//正则表达式验证用户名和email是否合法

chk=chk&&checkReg（uname,/^（[\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z]）|_\w*$/,"用户名必须以字母、下划线或者汉字开头,请修改后提交"）;

chk=chk&&checkReg（email,/\w+（[-+.']\w+）*@\w+（[-.]\w+）*\.\w+（[-.]\w+）*$/,"请输入正确的email格式,格式如下:

admin@"）;

在上边的验证中使用到了checkLength（）方法和checkReg方法，这两个方法分别都是自定义方法，分别是验证字段长度和通过正则表达式验证输入是否合法的方法，在jQueryUI官方提供的Demo里也有相应的方法，下面是checkLength和checkReg方法，方法的注释写的很清楚了。

//判断字段长度是否符合要求的方法,四个参数分别为：

o被检测的对象,msg被检测对象显示名称

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

functioncheckLength（o,msg,min,max）{

if（o.val（）.length>max||o.val（）.length

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

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

returnfalse;

}else{

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

o.removeClass（"ui-state-error"）;

returntrue;

}

}

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

functioncheckReg（o,reg,n）{

if（!

reg.test（o.val（）））{

o.addClass（"ui-state-error"）;

updateTip（n）;

returnfalse;

}else{

o.removeClass（"ui-state-error"）;

returntrue;

}

}

在这两个方法中都用到了一个updateTip方法，该方法的作用就是给那个

标签也就是错误消息显示的地方添加一个css样式，用来高亮提示用户的。

方法如下：

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

functionupdateTip（t）{

tips.text（t）.addClass（"ui-state-highlight"）;

}

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

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

具体代码如下：

此处用到了一个serialize（）方法，是一个jquery-ui-1.9.2.custom.js中的函数，可以序列化表单，这样我们只需要把序列化后的值传递给后台就行，不用一个个获取再拼接了。

if（chk）{

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

tips.removeClass（）.text（""）;

//序列化表单

varuser=$（"#reg-form"）.serialize（）;

//发起ajax请求

$.ajax（{

type:

'post',

url:

'data_ajax.php',

data:

user,

success:

function（msg）{

//msg是异步处理页输出的返回参数若返回参数为"success"则关闭dialog框，否则输出提示信息

if（msg=="success"）{

$（"#register-form"）.dialog（"close"）;

}else{

alert（"服务器异常,请稍后再试"）;

}

},

error:

function（）{

alert（"ajax请求失败"）;

}

}）;

}

},//提交：

function（）{的括回

取消:

function（）{

alert（'您点击了取消！

'）;

}

}//buttons的括回

}）;//dialog的括回

当注册信息按格式填写提交完成后，页面会关闭dialog框,如果点击取消则提示一个提示框（这里“取消”没写实际的功能）。

下面的图片显示当验证出现错误时的样式