最近應公司要求作了一個jquery的示例文件,包括:模態窗口怎麼實現;jquery validate下的校驗;怎麼作圖片特效;怎麼實現異步操做;實現圖片上傳剪切效果等不少特效;
這裏把jquery校驗的部分傳上來與你們分享,直接複製出來就能夠正常使用(沒有後臺異步校驗沒有意義,因此未上傳,若有須要qq聯繫)
文中須要用到的jquery validate的文件作校驗
有什麼不明白的地方能夠參考個人博文 jquery校驗詳解 
代碼以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
javascript
<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>
原文地址:http://blog.sina.com.cn/s/blog_608475eb0100oq0n.html