部分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的验证。
复选框分两种情况:一是多个复选框必须选择至少一个;二是单个复选框必须选择,常用于注册页面同意条款或协议等才能提交。
需要都验证通过才能提交页面。