jQuery UI全教程之一(dialog的使用教程)(2)_H5之家 - 中国HTML5教程资源分享第一站

username:<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />

password:<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

</fieldset>

</form>

</div>

大家可以看到每个input标签都有一个class属性，指定了3个class样式。这就是jQueryUI给我们提供的，不需要我们去写样式表文件。

更多的属性应用大家可以参考官方提供的文档，由于属性较多，不再一一介绍。都很简单，需要用到的时候查询一下即可

下面说说dialog中的事件调用。在上面的例子中dialog只有一个按钮，用于登录。如果我想添加另外一个按钮：关闭，当我点击关闭时关闭dialog该如何做呢？在jQueryUI中，多数组件的事件都使用如下的形式来调用：

$("#dialog").dialog("close");其中close就是事件的名称，这样当我点击这个按钮时就可以关闭该dialog了。如果要打开dialog也是同样的道理。$("#dialog").dialog("open");这个用于打开dialog。更多的方法请查阅文档，事件的功能不一样，但是用法基本一致：

都是$.dialog("事件名称");这种形式

下面我们以dialog为例，来实现一个实用dialog+form表单进行ajax注册的实例(只写前台实现，后台请根据自己所用的服务器端语言进行实现。)

首先看注册的dialog中都有什么内容。主页页面的dialog如下所示：

jQuery UI全教程之一(dialog的使用教程)

注册表单中有用户名、密码、email和用户的生日以及“提交”和“取消按钮”

功能描述：

当用户点击提交的时候首先进行客户端的验证，如果有不符合要求的则给与用户提示信息。提示信息会以醒目的方式显示在表单的最上方，不是alert()的方式。当验证通过后点击提交按钮发起ajax请求，将表单数据发送到后台处理，最终记录在数据库中，注册成功

先来看注册表单中div中的内容：

<p class="validateTips">所有的表单域都为必填项.</p>

用户名:<input type="text" name="uname" id="uname" value="" class="text ui-widget-content ui-corner-all" />

密码:<input type="password" name="upass" id="upass" value="" class="text ui-widget-content ui-corner-all" />

email:<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

生日:<input type="text" readonly="readonly" name="birth" id="birth" value="" class="text ui-widget-content ui-corner-all" />

</fieldset>

</form>

</div>

上边的div中显示的就是注册表单的内容。一共四项，和大家看到的dialog中的是一致的

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

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

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

var uname = $("#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(){

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

var chk = 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(name,/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])|_\w*$/,"用户名必须以字母、下划线或者汉字开头,请修改后提交");

chk = chk && checkReg(email,/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,"请输入正确的email格式,格式如下:admin@yahoo.com");