image.png

一、
任务3：验证邮政编码和手机号码
代码：
1.html文件
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {$ ("#code").blur(function(){
var code = $(this).val(); var$ codeId = $("#divCode"); var regCode = /^\d{6}$ /;
if(regCode.test(code)==false){
$codeId.html("邮政编码不正确，请重新输入"); return false; }$ codeId.html("");
return true;
})
$("#mobile").blur(function(e) { var mobile =$ (this).val();
var $mobileId =$ ("#divMobile");
var regMobile = /^1\d{10} $/; if(regMobile.test(mobile)==false){$ mobileId.html("手机号码不正确，请重新输入");
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>

二、
技能训练：验证博客园用户注册页面
代码：
1.html文件
<link rel="stylesheet" href="css/register.css">
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(e) { /*用户名验证*/$ ("#user").blur(function(e) {
var user = $(this).val(); var reg = /^[a-zA-z][a-zA-z0-9]{3,15}$ /;
if(reg.test(user)==false){
$("#user_prompt").html("用户名不正确"); return false; }$ ("#user_prompt").html("");
return true;
});
/密码验证/
$("#pwd").blur(function(e) { var pwd =$ (this).val();
var reg = /^[a-zA-z0-9]{4,10} $/; if(reg.test(pwd)==false){$ ("#pwd_prompt").html("密码不能含有非法字符，长度在4-10之间");
return false;
}
$("#pwd_prompt").html(""); return true; });$ ("#repwd").blur(function(e) {
var repwd = $("#repwd").val(); var pwd =$ ("#pwd").val();
if(pwd !=repwd){
$("#repwd_prompt").html("两次输入的密码不一致"); return false; }$ ("#repwd_prompt").html("");
return true;
});
/验证邮箱/
$("#email").blur(function(e) { var email =$ (this).val();
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2} $/; if(reg.test(email)==false){$ ("#email_prompt").html("Email格式不正确，例如web@sohu.com");
return false;
}
$("#email_prompt").html(""); return true; }); /*验证手机号码*/$ ("#mobile").blur(function(e) {
var mobile = $(this).val(); var regMobile = /^1\d{10}$ /;
if(regMobile.test(mobile)==false){
$("#mobile_prompt").html("手机号码不正确，请重新输入"); return false; }$ ("#mobile_prompt").html("");
return true;
});
/生日验证/
$("#birth").blur(function(e) { var birth =$ (this).val();
var reg = /^((19\d{2})|(201[0-6]))-(0?[1-9]|[1-2]\d|3[0-1]) $/; if(reg.test(birth)==false){$ ("#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">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="pwd" type="password" /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
</dl>
<dl>
<dt>确认密码：</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>手机号码：</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;
}

2019-11-25