一、
任務(wù)3：驗(yàn)證郵政編碼和手機(jī)號碼
代碼：
1.html文件
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
("#code").blur(function(){
var code = codeId =
/;
if(regCode.test(code)==false){
codeId.html("");
return true;
})
(this).val();
var ("#divMobile");
var regMobile = /^1\d{10}mobileId.html("手機(jī)號碼不正確绢涡，請重新輸入");
return false;
}
$mobileId.html("");
return true;
});
});
</script>
<style type="text/css">
body {
line-height: 25px;
}
input {
width: 120px;
height: 16px;
}
div {
color: #F00;
font-size: 12px;
display: inline-block;
padding-left: 5px;;
}
ul,li{list-style: none;}
</style>
</head>
<body>
<ul>
<li>郵政編碼：<input id="code" type="text" /><div id="divCode"></div></li>
<li>手機(jī)號碼：<input id="mobile" type="text" /><div id="divMobile"></div></li>
</ul>
</body>
</html>
二历等、
技能訓(xùn)練：驗(yàn)證博客園用戶注冊頁面
代碼：
1.html文件
<link rel="stylesheet" href="css/register.css">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
("#user").blur(function(e) {
var user = /;
if(reg.test(user)==false){
("#user_prompt").html("");
return true;
});
/密碼驗(yàn)證/
(this).val();
var reg = /^[a-zA-z0-9]{4,10}("#pwd_prompt").html("密碼不能含有非法字符，長度在4-10之間");
return false;
}
("#repwd").blur(function(e) {
var repwd = ("#pwd").val();
if(pwd !=repwd){
("#repwd_prompt").html("");
return true;
});
/驗(yàn)證郵箱/
(this).val();
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}("#email_prompt").html("Email格式不正確坚踩，例如web@sohu.com");
return false;
}
("#mobile").blur(function(e) {
var mobile = /;
if(regMobile.test(mobile)==false){
("#mobile_prompt").html("");
return true;
});
/生日驗(yàn)證/
(this).val();
var reg = /^((19\d{2})|(201[0-6]))-(0?[1-9]|[1-2]\d|3[0-1])("#birth_prompt").html("生日格式不正確，例如1980-5-12或1988-05-04");
return false;
}
$("#birth_prompt").html("");
return true;
});
});
</script>
</head>
<body>
<section id="register">
<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
<h1 class="hr_1">新用戶注冊</h1>
<form action="" method="post" name="myform">
<dl>
<dt>用戶名：</dt>
<dd><input id="user" type="text" /><div id="user_prompt">用戶名由英文字母和數(shù)字組成的4-16位字符橱健，以字母開頭</div></dd>
</dl>
<dl>
<dt>密碼：</dt>
<dd><input id="pwd" type="password" /><div id="pwd_prompt">密碼由英文字母和數(shù)字組成的4-10位字符</div></dd>
</dl>
<dl>
<dt>確認(rèn)密碼：</dt>
<dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
</dl>
<dl>
<dt>電子郵箱：</dt>
<dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
</dl>
<dl>
<dt>手機(jī)號碼：</dt>
<dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
</dl>
<dl>
<dt>生日：</dt>
<dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
</dl>
<dl>
<dt>?</dt>
<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
</dl>
</form>
</section>
</body>
</html>
2.CSS文件
*{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
}
register{
width:525px;
margin: 0 auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom: 2px solid #3275c3;
vertical-align:bottom;
padding-left:12px;
margin-bottom: 15px;
}
register dl{clear: both; height: 30px;}
register dl dt{
text-align:right;
width:80px;
height:25px;
padding-right:5px;
float: left;
}
register dl dd{
float: left;}
register dl dd div{ display: inline; padding-left: 5px;}
register dl dd input:not(.btn){
width:130px;
height:18px;
border:solid 1px #0066FF;
}
.red{
color:#cc0000;
font-weight:bold;
}
div{
color:#F00;
}
