运行结果:(关于正则表达式的验证是包含的,这里就不作验证了)
孩子学艺不精,许多代码可以省略,所以写的有点冗余,但磕磕碰碰也算完成了,下面直接上代码:
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国网邮箱</title>
<link href="../css/中国邮箱表单.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/中国邮箱表单.js" ></script>
</head>
<body>
<form>
<div class="div1">
<h2>中国人发邮件用中国网邮箱</h2>
<p class="p3">china.com.cn</p>
</div>
<div>
<p class="p4">新用户申请(带<span>*</span>的为必填选项)</p>
<table>
<tr>
<td class="table1">
<label for="userName" >用户名</label>
</td>
<td>
<input type="text" id="userName" class="input2" /><p class="p1">*</p>
</td>
<td class="table2">
<label for="trueName">真实姓名</label>
</td>
<td>
<input type="text" id="trueName" class="input2" /><p class="p1"> *</p>
</td>
</tr>
<tr>
<td class="table1">
<label for="password">密码</label>
</td>
<td>
<input type="password" id="password" class="input2" /><p class="p1"> *</p>
</td>
<td class="table1">
<label>性别</label>
</td>
<td>
<input type="radio" name="sex" value="女" class="input1" /><p class="p2">女</p>
<input type="radio" name="sex" value="男" class="input1" /><p class="p2">男</p>
</td>
</tr>
<tr>
<td class="table1">
<label for="assureThePassword">确认密码</label>
</td>
<td>
<input type="password" id="assureThePassword" class="input2" onblur="equal()" /><p class="p1"> *</p>
</td>
<td class="table1">
<label>省/市</label>
</td>
<td>
<select>
<option value="BeiJing" selected="selected">北京</option>
<option value="ShangHai">上海</option>
<option value="TianJing">天津</option>
<option value="HangZhou">杭州</option>
<option value="others">其他</option>
</select>
</td>
</tr>
<tr>
<td class="table1">
<label for="verificationCode">验证码</label>
</td>
<td>
<input type="text" id="verificationCode" class="input2" />
</td>
<td class="table1">
<label for="address">地 址</label>
</td>
<td>
<input type="text" id="address" class="input3" />
</td>
</tr>
<tr>
<td class="table1">
<label for="isMatched">密码提示问题</label>
</td>
<td>
<input type="text" id="isMatched" class="input2" /><p class="p1"> *</p>
</td>
<td class="table1">
<label for="postalCode">邮政编码</label>
</td>
<td>
<input type="text" id="postalCode" class="input3" />
</td>
</tr>
<tr>
<td class="table1">
<label for="answer">问题的答案</label>
</td>
<td>
<input type="text" id="answer" class="input2" /><p class="p1"> *</p>
</td>
<td class="table1">
<label for="birthday">生 日</label>
</td>
<td>
<input type="text" id="birthday" class="input4" /><p class="p2">年</p>
<select class="select1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<p class="p2">月</p>
<select class="select1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="others">其他</option>
</select>
<p class="p2">日</p>
</td>
</tr>
<tr>
<td class="table1">
<label for="e-mail">电子邮箱</label>
</td>
<td>
<input type="text" id="e-mail" class="input2" onblur="e_mailError()" />
</td>
<td class="table1">
<label for="identification">身份证号码</label>
</td>
<td>
<input type="text" id="identification" class="input3" onblur="identificationTest()" />
</td>
</tr>
<tr>
<td class="table1">
<label for="telephoneNumber">手机号码</label>
</td>
<td>
<input type="text" id="telephoneNumber" class="input2" onblur="telephoneNumberError()" />
</td>
<td class="table1">
<label for="contactNumber">联系电话</label>
</td>
<td>
<input type="text" id="contactNumber" class="input3" />
</td>
</tr>
</table>
</div>
<div>
<button type="submit" id="btu1" class="button1" onclick="emptyError()" onmouseenter="inButton1()" onmouseleave="outButton1()" >提交</button>
<button type="reset" id="btu2" class="button2" onmouseenter="inButton2()" onmouseleave="outButton2()" >重置</button>
<p class="p5">版权所有 中国互联网新闻中心</p>
</div>
</form>
</body>
</html>
css文件:
h2{
height: 7px;
margin-left: 35px;
}
.div1{
border:1.5px solid #000000;
background-image: url(../img/翅膀.jpg);
background-size: 50% 100%;
background-repeat:no-repeat;
background-position: right;
}
.p1{
display: inline;
color: rgb(187,22,33);
font-weight: bold;
}
.p2{
display: inline;
}
.p3{
color: rgb(198,39,87);
font-weight: bold;
height: 5px;
margin-left: 190px;
font-size: 20px;
}
.p4{
margin-bottom: 7px;
text-align: center;
height: 5px;
font-size: small;
}
.p5{
margin-left: 260px;
font-size: smaller;
}
span{
color: rgb(198,39,87);
font-weight: 500;
font-weight: bold;
}
td{
line-height: 40px;
}
.table1{
text-align: right;
}
.table2{
text-align: right;
padding-left: 60px;
}
form{
background-color: rgb(243,248,251);
margin-left: 450px;
margin-right: 450px;
background-image: url(../img/中国.jpg),
url(../img/aply.jpg);
background-repeat: no-repeat, no-repeat;
background-position: bottom left, center center;
background-size: 45% 7%,15% 7%;
}
label{
padding-right: 16px;
}
input{
box-shadow:.8px .8px 0px #000000 inset;
border-color: lightgray;
height: 20px;
}
.input1{
box-shadow: 0px 0px 0px #000000;
}
.input2{
width: 105px;
}
.input3{
width: 170px;
}
.input4{
width: 25px;
}
.select1{
width: 40px;
height: 22px;
}
.button1{
margin-left: 225px;
padding-left: 15px;
padding-right: 15px;
border-radius:5px;
border:.2px solid #000000;
}
.button2{
margin-left:45px;
padding-left: 15px;
padding-right: 15px;
border-radius:5px;
border:.2px solid #000000;
}
js文件:
//对必填项的判空操作
function emptyError(){
var empty=/^$/;//定义一个为空的正则表达式的形式
var pass1=document.getElementById("userName").value;
var pass2=document.getElementById("trueName").value;
var pass3=document.getElementById("password").value;
var pass4=document.getElementById("assureThePassword").value;
var pass5=document.getElementById("isMatched").value;
var pass6=document.getElementById("answer").value;
//只要必填项有一个符合空的操作,则为错误
if(empty.test(pass1)||empty.test(pass2)||empty.test(pass3)||empty.test(pass4)||empty.test(pass5)||empty.test(pass6)){
alert("必填项不能为空!");
}
}
//身份证正则表达式
function identificationTest (){
var pass=document.getElementById("identification").value;//获取身份证输入框的值
var reg=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//17位的数字或者X的验证规则,没有讨论号码的真实性
if(!reg.test(pass)){
alert("error!请检查身份证格式");
}
}
//电子邮箱的正则表达式
function e_mailError(){
var pass=document.getElementById("e-mail").value;
var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!reg.test(pass)){
alert("error!请检查邮箱的格式");
}
}
//手机号码的正则表达式
function telephoneNumberError(){
var pass=document.getElementById("telephoneNumber").value;
var reg=/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
if(!reg.test(pass)){
alert("error!请检查手机号码的格式");
}
}
//密码是否相同的比较
function equal(){
if(password.value!=assureThePassword.value){
alert("error!两次密码必须相同");
assureThePassword.value="";
}
}
//下面是设置按钮变色
function inButton1(){
document.getElementById("btu1").style.background="lightgrey";
}
function outButton1(){
document.getElementById("btu1").style.background="rgb(239,239,239)";
}
function inButton2(){
document.getElementById("btu2").style.background="lightgrey";
}
function outButton2(){
document.getElementById("btu2").style.background="rgb(239,239,239)";
}
下面是所用到的图片: