以下的代码是从书上打入进来的，里面设计一些最为常用表单的代码，可以学到更加详细具体的知识。虽然代码不难，但是对于规范格式等很有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证整个表单</title>
<style>
.submit{
margin-left:125px;margin-top:10px;}
.label{float:left;width:120px;}
.infobox{width:120px;}
.error{color:red;padding-left:10px;}
div{padding:5px;}
.chkb{margin-left:125px;padding-left:10px;}
.radiobtn{margin-left:125px;margin-top:10px;}
.inputs{
background-color:cyan}
fieldset{
border:1px solid #888;}
legend{
border:1px solid #888;
background-color:cyan;
color:blue;
font-weight:bold;
padding:5em;
}
</style>
<script type="text/javascript" src="G:\jquery-2.1.3.js"></script>
$(document.ready(function(){
$('.error').hide();
$('.userid').focus(function(){
$(this).addClass('inputs');
});
$('.emailadd').focus(function(){
$(this).addClass('inputs');
});
$('.password').focus(function(){
$(this).addClass('inputs');
});
$('fooderror').addClass('error');
$('.fooderror').hide();
$('.payerror').addClass('error');
$('.payerror').hide();
$('.submit').click(function(event){
var data=$('.userid').val();
if(validate_userid(data)){
$('.userid').next().hide();
}
else{
$('.userid').next().show();
}
data=$('.password').val();
var len=data.length;
if(len<1){
$('.password').next().show();
}
else{
$('.password').next().hide();
}
data=$('.emailadd').val();
if(valid_email(data)){
$('.emailadd').next().hide();
}
else $('.emailadd').next().show();
var count=0;
$('div').find(':checkbox').each(function(){
if($(this).is(':checked')){
cout++;
}
});
if(count==0){
$('.fooderror').css({'margin-left':250}).show();
}
else $('.fooderror').hide();
count=0
$('div').find("radio").each(function(){
if($(this).is(':chexkbox')){
count++;
}
});
if(count==0){
$('.payerror').css({'margin-left':250}).show();
}
else
$('.payerror').hide();
count=$('select option:selected').val();
if(count==0){
$('.infobox').next().show();
}
else $('.infobox').next().hide()
event.preventDault();
});
});
function valid_email(email){
var pattern=new RegExp(/^[\w-]+(\.[w-]+\.)+[a-zA-Z]+$/);
return pattern.test(email);
}
function validate_userid(uid){
var pattern=new RegExp(/^[a-z0-9]+$/);
return pettern.test(uid);
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>Enter your information</legend>
<div><span class="label">User ID</span>
<input type="text" class="userid" name="userid"/><span class="error">User id can contain only numeral,character or_(underscore)</span></div>
<div><span class="label">Password</span><input type="password" class="password" name="password" /><span class="error">password cannot be blank </span></div>
<div><span class="label">Email Address</span><input type="text" name="emailid" class="emailadd" /><span class="error">Invalid email address</span></div>
</fieldset>
<fieldset>
<div ><span class="label">select food items</span><br /><input type="checkbox" name="pizza" id="pizza" value=5 class="chkb" />Pizza $5<br />
<input type="checkbox" id="hotdog" name="hotdog" value=2 class="chkb" />HotDog $2<br />
<input type="checkbox" id="coke" name="coke" value=1 class="chkb" />Coke $1<br />
<input type="checkbox" id="fries" name="fries" value=3 class="chkb" />French Fries $3<br />
<span class="fooderror" >you have no selected any food item</span></div>
<div><span class="label">mode of payment</span><br /><input type="radio" name="paymode" class="radiotn" value="MasterCard" />MasterCard<br />
<input type="radio" name="paymode" class="radiobtn" value="ANZ GRINDLAY CARD" />ANZ GRINDLAY CARD<br />
<input type="radio" name="paymode" class="radiobtn" value="Visa card" />Visa card<br />
<span class="payerror" >you have not selected any payment method </span></div>
</fieldset>
<fieldset>
<div><span class="label">Country </span><select id="country" class="infobox">
<option value="0" >select a country </option>
<option value="USA" >USA </option>
<option value="United" >United</option>
<option value="India" >India </option>
<option value="China" >China </option>
</select>
</fieldset>
<span class="error">Please select the country </span></div>
<input class="submit" type="submit" value="Submit" /></form>
</body>
</html>
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
