jQuery教學-jQuery.validate萬用表單驗證元件直接套用

分類:網頁設計 , Javascript | 2010-01-20
梅問題-jQuery教學-jQuery.validate萬用表單驗證外掛直接套用
  今天不管是製作留言回應加入會員訂購表單....等,都脫離不了表單的驗證,來預防有心人士隨便亂打、亂填,盡收到一堆不完整、不正確的資料, 以前梅干都是用javascript來作驗證有值就好,但近來發現到若有人故意在欄位中,輸入空白就可通過驗證,如此一來就會收到一堆空白的會員資料或留言,真梅干感到頭痛,於是請教了好友男丁,有無好的解決辦法,哈~真不虧是老級的,馬上就丟了一個jQuery外掛jQuery.validate表單驗證,完全不用寫任何的程式,只要指定要驗證的欄位就可以了,不然光想到要用正規表示法,梅干手腳都軟了。

jQuery.validate
外掛名稱:jQuery.validate
外掛版本:1.6
官網下載:http://jquery.bassistance.de/

放在<head>.....</head>之間:
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(function(){
	//須與form表單ID名稱相同
	$("#commentForm").validate();
});
</script>

放在<body>.....</body>之間:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<form class="cmxform" id="commentForm" method="post" action="javascript:alert('完成');">
	<fieldset>
		<legend> 星號為必填欄位 </legend>
		<p>
			<label for="cname">姓名(*)</label>
			<input id="cname" name="name" class="required" minlength="2" />
		<p>
			<label for="cemail">Email(*)</label>
			<input id="cemail" name="email" class="required email" />
		</p>
		<p>
			<label for="curl">URL</label>
			<input id="curl" name="url" class="url" value="" />
		</p>		
		<p>
			<label for="phone">聯絡電話</label>
			<input id="phone" name="phone" class="digits" value="" />
		</p>		
		<p>
			<label for="ccomment">回應 (*)</label>
		  <textarea id="ccomment" name="comment" class="required"></textarea>
		</p>
		<p>
			<input class="submit" type="submit" value="送出"/>
		</p>
	</fieldset>
</form>

語法解說:
若要驗證欄位,只要將參數加在class標籤下就可以了,如要混用只要在每個參數後方空一格,隔開即可,可用參數如下:
required:必填欄位
email:格式要符合E-Mail格式
url:格式要符合網址格式,如:http://www.minwt.com
number:數字格包含小數點
digits:數字為正整數
date:日期格式
dateISO:日期格式,格式必需為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD
equalTo:與某一欄位值相同

minValue:最小字元長度
maxValue:最大字元長度
rangeValue:字元長度區間長度

minLength:最小字元長度(漢字算一個字符)
maxLength:最大字元長度(漢字算一個字符)
rangeLength:字元長度區間長度(漢字算一個字符)

修改提示詞:
利用記事本開啟js/jquery.validate.js ,找到257行底下就是所有錯誤的提示訊息,各位可依需求自行更改。
梅問題-jQuery教學-jQuery.validate萬用表單驗證外掛直接套用
  jQuery.validate這隻表單驗證的功能相當強大與完整,而梅干只整理平常較常使用到的部分,各位若有其它更進一步的需求,可直接下載jQuery.validate的完整套件,裡面有提供各式各樣的表單驗證範例可參考,而只要善用一些外掛元件,將可省去不少開發時間,jQuery.validate真得很酷。
[範例預覽] [範例下載]




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 22 梅留言

  • 第22梅
    Sandy 說道:

    上一楼说无法验证。但经过测试,这个框架可以对中的进行验证,如:

    —请选择—
    广州
    深圳
    中山
    佛山

    当选项为“—请选择—”时,验证不通过。