Validator 与artdialog结合

效果图

1 提交表单使用 validate对表格进行验证

2 ajaxsumbit提交表单 artdialog 弹出提示提交成功(弹出框消失后提示并刷新页面)；

validate.js

$(function(){
$("#click").click(function(e) {
$.dialog.tips('提交成功！', 1.5);
var dialog= $.dialog({
title:"nihao",//对话框标题间
content:document.getElementById('mms_form'),//对话框内容可以使用getElementById,getElementByTagName 方式获取内容添加到弹出框内
width:'800px',
height:'300px',
padding: 0, //内容与边界距离
fixed:true, //锁定不会随着滚动条的滑动而滚动
lock: true, //锁定弹出框出现后与外部断开联系一般用于重要的提示
background: 'white', // 背景色
opacity: 0.2, // 透明度
id: "对话框唯一标识"
});
$("#mms_form").validate
({
errorClass: "mem_cerror",
rules: {
//规则名称为name属性
email: {
required: true,
email:true
},
username: {
required: true,
}

},
// 验证提示信息
messages: {
email:
{
//验证提示与上面规则属性想对应
required: "密码必须",
email:"请输入正确邮箱"
},
username:
{
required: "真实姓名必须",

}
},
submitHandler: function(form) {
$("#mms_form").ajaxSubmit({
//此处自动匹配对方提供的数据类型datatype
type: 'POST',
//beforeSubmit: function() {

// 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据， jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]},
success: function(data)
{
var this_obj=JSON.parse(data);
if(this_obj=="1")
{
//必须对象调用 close()函数
dialog.close();
$.dialog.tips('提交成功!','0.5');
location.reload();
}
}
})
}
})
})
})

validate.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script src="jquery.artDialog.js" type="text/javascript"></script>
<script src="iframeTools.source.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="./skins/black.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.mem_cerror {padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}
</style>
</head>
<body>
<form action="a.php" method="post" id="mms_form" style="display:none">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>邮箱:</td>

<td><input type="text" name="email" /></td>
</tr>
</table>
<input type="submit" value="提交" id="mms_form"/>

</form>
<button id="click">点击</button>
</body>
</html>

a.php

<?php
// 可以以不同的数据类型输出以json为例
echo json_encode("1");

posted on 2013-03-20 19:25 ijoanne 阅读(1067) 评论(0) 收藏举报