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的验证。

复选框分两种情况:一是多个复选框必须选择至少一个;二是单个复选框必须选择,常用于注册页面同意条款或协议等才能提交。

需要都验证通过才能提交页面。






发布了40 篇原创文章 · 获赞 148 · 访问量 29万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章