jquery的示例文件，包括：模态窗口怎么实现；jquery validate下的校验；怎么做图片特效；怎么实现异步操作；实现图片上传剪切效果等很多特效；
这里把jquery校验的部分传上来与大家分享，直接复制出来就可以正常使用（没有后台异步校验没有意义，所以未上传，如有需要qq联系）
文中需要用到的jquery validate的文件做校验
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>validateDemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- js校验开始 -->
<link rel="stylesheet" type="text/css" href="../js/jQuery/validate/validation.css">
<script type="text/javascript" src="../js/jQuery/jquery.js"></script>
<script type="text/javascript" src="../js/jQuery/validate/jquery.validate.pack.js"></script>
<!--这个文件是通过addmethod新增加了几个方法，不会可以跳过，-->
<script type="text/javascript" src="../js/jQuery/validate/additional-methods.js"></script>
<!-- 这里可以看到所有的校验规则 -->
<script type="text/javascript" src="../js/jQuery/validate/messages_cn.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
//通过id查找要进行校验的表单
$("#signupForm").validate({
//设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
//onsubmit:false,
//onfocusout:false,
//onkeyup:false,
//onclick:false,
//验证通过后执行的动作
//success:function(label){
// label.text("ok!").addClass("success");
//},
//手动设置错误信息的显示方式
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
// if ( element.is(":radio") )
// error.appendTo( element.siblings("span") );
// else if ( element.is(":checkbox") ){
// error.appendTo ( element.siblings("span") );
// }
// else
// error.appendTo( element.parent() );
}
,
rules:{
username:{
required: true,
rangelength: [ 5, 7 ]
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
sex: {
required: true
},
email: {
required: true,
email: true
},
language: {
required: true,
rangelength:[2,3]
},
book: {
required: true,
rangelength:[2,3]
},
agree: "required",
upload: {
required: true,
accept: "flv|jpg"
}
},
//校验提示信息
messages: {
username: {
required: "请输入用户名",
rangelength: "用户名长度必须为{0}到{1}个字符或汉字"
},
password: {
required: "请输入密码",
minlength: "密码的最小长度是{0}个字符"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码的最小长度是{0}个字符",
equalTo: "确认密码与密码不相等"
},
email: "请输入正确的邮箱",
language: {
required: "该项必须填写",
rangelength: "请您选择{0}到{1}项语言"
},
book: {
required: "该项必须选择",
rangelength:"请您选择{0}到{1}本书"
},
agree: "您没有同意使用协议",
upload: {
required: "请输入上传文件的路径",
accept: "上传文件的格式只能是 flv或jpg"
}
}
});
})
</script>
<!-- js校验结束 -->
</head>
<body style="font-family:'宋体','Arial Narrow';
font-size:12px;
">
<!-- 表单校验功能 -->
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset >
<legend>字段校验、日历控件完整示例</legend>
<table>
<tr>
<td><label for="username">Username</label></td>
<td><input id="username" name="username" /></td>
<!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 -->
<td></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input id="password" name="password" type="password" /></td>
<td></td>
</tr>
<tr>
<td><label for="confirm_password">Confirm password</label></td>
<td><input id="confirm_password" name="confirm_password" type="password" /></td>
<td></td>
</tr>
<tr>
<td><label for="sex">sex</label></td>
<td><pre><input id="sex1" name="sex" type="radio" />男 <input id="sex2" name="sex" type="radio" />女</pre></td>
<td></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input id="email" name="email" /></td>
<td></td>
</tr>
<tr>
<td><label for="upload">Upload</label></td>
<td><input type="file" name="upload" /></td>
<td></td>
</tr>
<tr>
<td><label for="language">language</label></td>
<td><input type="checkbox" name="language" value="cn" />汉语
<input type="checkbox" name="language" value="en" />英语
<input type="checkbox" name="language" value="jp" />日语
<input type="checkbox" name="language" value="ge" />德语
</td>
<td></td>
</tr>
<tr>
<td><label for="book">book</label></td>
<td><select name="book" multiple="multiple" >
<option value="en">英语书</option>
<option value="cn">汉语书</option>
<option value="jp">日语书</option>
<option value="ge">德语书</option>
</select></td>
<td></td>
</tr>
<tr>
<td><label for="agree">同意该协议</label></td>
<td><input type="checkbox" class="checkbox" id="agree" name="agree" />
</td>
<td></td>
</tr>
<tr>
<td><input class="submit" type="submit" value="Submit" /></td>
</tr>
</table>
</fieldset>
</form>
<!-- 表单校验结束 -->
</body>
</html>
jQuery校验
官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation
一导入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true
(2)remote:"check.php"
(3)email:true
(4)url:true
(5)date:true
(6)dateISO:true
(7)number:true
(8)digits:true
(9)creditcard:
(10)equalTo:"#field"
(11)accept:
(12)maxlength:5
(13)minlength:10
(14)rangelength:[5,10]
(15)range:[5,10]
(16)max:5
(17)min:10
三、默认的提示
messages: {
},
如需要修改，可在js代码中加入：
jQuery.extend(jQuery.validator.messages, {
});
推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>
四、使用方式
1.将校验规则写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
});
<form id="signupForm" method="get" action="">
</form>
使用class="{}"的方式，必须引入包：jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="{required:true,minlength:5,equalTo:'#password'}"
2.将校验规则写到js代码中
$().ready(function() {
});
//messages处，如果某个控件没有message，将调用默认的信息
<form id="signupForm" method="get" action="">
</form>
required:true 必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function(){}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT
$().ready(function() {
});
可以设置validate的默认值，写法如下：
$.validator.setDefaults({
});
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
2.debug，只验证不提交表单
如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
$().ready(function() {
});
$.validator.setDefaults({
})
3.ignore：忽略某些元素不验证
ignore: ".ignore"
4.更改错误信息显示的位置
errorPlacement：Callback
errorPlacement: function(error, element) {
}
//示例：
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
errorPlacement: function(error, element) {
}
代码的作用是：一般情况下把错误信息显示在<td class="status"></td>中，如果是radio显示在<td></td>中，如果是 checkbox显示在内容的后面
errorClass：String
errorElement：String
errorContainer：Selector
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector
把错误信息统一放在一个容器里面。
wrapper：String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5更改错误信息显示的样式
设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
input.error { border: 1px solid red; }
label.error {
}
label.checked {
}
6每个字段验证通过执行函数
success：String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
success: function(label) {
}
success: "valid"
7验证的触发方式修改
下面的虽然是boolean型的，但建议除非要改为false,否则别乱添加。
onsubmit：Boolean
onfocusout：Boolean
onkeyup：Boolean
onclick：Boolean
focusInvalid：Boolean
focusCleanup：Boolean
// 重置表单
$().ready(function() {
});
8异步验证
remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote: "check-email.php"
remote: {
}
远程地址只能输出 "true" 或 "false"，不能有其它输出
9添加自定义校验
addMethod：name, method, message
自定义验证方法
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
}, $.validator.format("
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
}, "
10radio和checkbox、select的验证
1.radio的required表示必须选中一个
<input
<input
2.checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表 示选中个数区间
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
</select>
select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
</select>