Jquery表单验证插件的用法

larryscale

浏览: 179071 次
性别:
来自: 深圳

最近访客更多访客>>

salansun

limengna845567

csdnwzw

zhaode90

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java编程

jQuery JavaScript JSP Cache CSS

　　說實話，填寫表單驗證是件很痛的事。

對於使用者而言,可以創建一份表單對他們面言是件更為痛苦的事,沒有人真正喜歡他們;對于開發者而言,當涉及到表單驗證時,最困難的并非僅僅是創建一份簡單且快速為用戶所接受使用,還要服務器端數據存儲,安全等更多問題的考慮.的確是相當的不容易.

本章將談一下如何使用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格式！"

};

validate_plug-in.rar (52 KB)
下载次数: 0

分享到：

struts2 文件上传 | 使用Jfreechart实现带热点的饼状图

2011-02-05 10:58
浏览 1049
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论