form表單checkbox密碼等驗證示例

部分HTML代碼：

<pre name="code" class="html"><form action="*.do">				
	<table cellpadding="0" cellspacing="0" border="0">					
		<tr>						
			<td class="bor-bot"  style="padding-left: 5px;">
				動態密碼： <input type="text" maxlength="20" style="border:0px;height:25px;width:110px; font-size:11px;" name="dtmm" id="dtmm" value="" placeholder="請輸入動態密碼" /> 
				<input type="button" id="getpass" name="getpass" value="  獲取" class="send" />
			</td>
		</tr>
		<tr>
			<td colspan="3" class="checkbox bor-bot" width="100%" >
				<div style="margin-left: 0;"><input type="checkbox" name="cbType" value="網購"/>網購</div>
				<div><input type="checkbox" name="cbType" value="海淘"/>海淘</div>
				<div><input type="checkbox" name="cbType" value="美食"/>美食</div>
				<div><input type="checkbox" name="cbType" value="娛樂"/>娛樂</div>
				<div><input type="checkbox" name="cbType" value="旅遊"/>旅遊</div>
			</td>
		</tr>
		<tr>
			<td colspan="3" class="checkbox bor-bot" width="100%" >
				<input type="checkbox" value="1" id="agreement" name="agreement"/><a href="">本人已閱讀活動條款</a>
			</td>
		</tr>
		<tr>
			<td>
			<span style="white-space:pre">	</span><input  id="btnSubmit" name="send" type="submit" value="提交"/>			
			</td>
		</tr>
	</table>
</form>

部分JS代碼：

<script type="text/javascript" charset="utf-8"	src="<%=ConfigUtil.getProjectBasePath()%>jqmobile/jquery-1.5.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
 	$("#btnSubmit").click(function(){
		var tag = "";
		$(":checkbox[name='cbType']:checked").each(function(){ tag = tag + this.value + ","});
		tag = tag.replace(/,$/,"");
		if(!tag){
			alert("請選擇標籤！");
			return false;
		}				
		if(!$("#agreement:checked").val()){ //很經典簡潔的用法
<span style="white-space:pre">			</span>alert("請同意活動條款!");
<span style="white-space:pre">			</span>return false;
              	}							
		if($("#dtmm").val()==""){
			alert("請輸入動態密碼！");				
			return false;
		}else if($("#getpass").val()=="獲取"){
			alert("輸入超時，請重新獲取動態密碼!");				
			return false;
		}else if(pass!=$("#dtmm").val()){
			alert("您輸入的動態密碼有誤，請重新輸入!");				
			return false;
		}				
		$("#regTag").val(tag);
		$("form").submit();
	});
</script>

form表單驗證的示例：有文本框text、複選框checkbox的驗證。

複選框分兩種情況：一是多個複選框必須選擇至少一個；二是單個複選框必須選擇，常用於註冊頁面同意條款或協議等才能提交。

需要都驗證通過才能提交頁面。