Jquery表单验证插件的用法
說實話，填寫表單驗證是件很痛的事。
對於使用者而言,可以創建一份表單對他們面言是件更為痛苦的事,沒有人真正喜歡他們;對于開發者而言,當涉及到表單驗證時,最困難的并非僅僅是創建一份簡單且快速為用戶所接受使用,還要服務器端數據存儲,安全等更多問題的考慮.的確是相當的不容易.
本章將談一下如何使用Jqruery插件提供的強大的功能實現表單的驗證,希望對您的學習和工作有所幫助
1. 創建一個Java Web工程,并引入Jquery庫,和Jquery插件庫
2. 寫Jsp頁面的表單及驗證[index.jsp]
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>無標題文檔</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
body{
font-size:12px;
}
fieldset{
width:600px;
margin:0px auto;
border: 1px solid blue;
text-align:center;
}
em{
color:red;
}
label.error{
color:red;
margin-left:5px;
}
input.error{
border:1px dashed red;
}
input{
border: 1px solid blue;
}
</style>
<!-- 引入JQuery -->
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<!-- 引入JQuery验证插件 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$("#myform").validate({
rules:{
username:{
required:true,
rangelength:[6,12]
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
equalTo:"#password"
}
},
messages:{
username:{
required:'帳戶不能為空',
rangelength:'應該在6到12個字符之間'
},
password:{
required:'密碼不能為空',
rangelength:'應該在6到12個字符之間'
},
repassword:{
equalTo:'重復密碼不一致'
}
}
});
});
</script>
</head>
<body>
<form action="#" id="myform" name="myform">
<fieldset>
<legend>JQuery驗證插件的使用</legend>
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="username"/><em>*</em></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="password" id="password"/><em>*</em></td>
</tr>
<tr>
<td>重複密碼:</td>
<td><input type="password" name="repassword"/><em>*</em></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
3. 運行結果如下:
4 . 其它的驗證也和這些用法差不多,
$.validator.messages = {
required: "心填項",
remote: "請修正",
email: "電子郵件地址格式不正確",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期(ISO).",
number: "請輸入數字",
digits: "請輸入整數",
creditcard: "請輸入合法的卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入合法的后綴名",
maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字符串"),
minlength: jQuery.format("請輸入一個長度至少是{0} 的字符串"),
rangelength: jQuery.format("請輸入一個介於 {0} 和 {1} 之間的字符串"),
range: jQuery.format("請輸入一個介於 {0} 和 {1}之間的值"),
max: jQuery.format("請輸入一個最大為{0} 的值"),
min: jQuery.format("請輸入一個最小為 {0} 的值"),
uploadImage: "圖片限于bmp,png,gif,jpeg,jpg格式！"
};