要求
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7ef4e8f6b276844c1a894180571cd94b.png)
实现
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f8da159daaf9bc9c9f7a4ce52ca54e20.png)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="head">
</header>
<form id="form" action="" method="GET" onsubmit="return check()">
<div>
<img src="images/pic001.gif" alt="">
<img src="images/pic002.gif" alt="">
<p>欢迎您申请SOHO联名信用卡</p>
</div>
<div>
<div>
<p>登录名:</p>
<p>登录密码:</p>
<p>确认密码:</p>
<p>身份证号码:</p>
<p>固定电话:</p>
<p>手机号码:</p>
<p>电子邮件:</p>
</div>
<div>
<input type="text" name="name">
<input type="password" name="password1">
<input type="password" name="password2">
<input type="ID" name="ID">
<input type="text" name="tel">
<input type="mobile" name="mobile">
<input type="text" name="email">
</div>
<div>
<span id="name"></span>
<br>
<span id="password1"></span>
<br>
<span id="password2"></span>
<br>
<span id="ID"></span>
<br>
<span id="tel"></span>
<br>
<span id="mobile"></span>
<br>
<span id="email"></span>
</div>
</div>
<div>
<input type="submit" style="background: url(images/pic-sb.jpg);" value="">
</div>
</form>
<script language="JavaScript" src="from_js.js"> </script>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
#head{
width: 528px;
height: 57px;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
background-image: url("images/top.gif");
margin: 0 auto;
}
#form{
width: 520px;
height: 300px;
background-color: blanchedalmond;
margin: 0 auto;
border: 5px solid #FF9EB6;
border-bottom-left-radius: 2%;
border-bottom-right-radius: 2%;
}
#form div:first-child{
height: 60px;
width: 100%;
}
#form div:first-child img{
float: left;
margin-top: 17px;
margin-right: 5px;
}
#form div:first-child img:first-child{
margin-left: 100px;
margin-top: 0px;
margin-right: 5px;
}
#form div:first-child p{
float: left;
font-size: 5px;
color:#E41414;
line-height: 56px;
}
#form div:nth-child(2){
height: 180px;
width: 100%;
}
#form div:nth-child(2) div:first-child{
height: 100%;
width:30%;
float: left;
}
#form div:nth-child(2) div:first-child p{
margin: 0;
padding: 0;
width: 100%;
line-height: 15px;
float: right;
color: black;
margin-top: 10px;
margin-right: 0px;
text-align: right;
}
#form div:nth-child(2) div:nth-child(2){
height: 175px;
width:32%;
float: left;
padding-left: 5px;
padding-top: 5px;
overflow: hidden;
}
#form div:nth-child(2) div:nth-child(2) input{
margin-bottom: 2px;
}
#form div:nth-child(2) div:nth-child(3){
height: 100%;
width:37%;
float: left;
}
#form div:nth-child(2) div:last-child span{
margin: 0;
padding: 0;
width: 100%;
line-height: 15px;
float: right;
color: black;
margin-top: 10px;
text-align: left;
}
#form div:last-child{
height: 60px;
}
#form div:last-child img{
margin-left: 180px;
}
#form div:last-child input{
width: 100px;
height: 32px;
margin-left: 180px;
}
js代码
var inputs = document.getElementsByTagName("input");
var flag_name=false;
inputs[0].onblur=function(){
var valuue_name=this.value;
var reg_name_true=/[A-z]{4,8}/g;
var reg_name_false=/[0-9]+/g;
var span=document.getElementById("name");
if(reg_name_true.test(valuue_name))
{
if(reg_name_false.test(valuue_name))
{
flag_name=false;
span.innerHTML="登录名不能含有数字";
span.style.display="inline";
}
else if(valuue_name.length<4||valuue_name.length>8){
flag_name=false;
span.innerHTML="姓名4-8位";
span.style.display="inline";
}
else{
flag_name=true;
span.innerHTML="√";
span.style.display="inline";
}
}
else if(reg_name_false.test(valuue_name))
{
flag_name=false;
span.innerHTML="登录名不能含有数字";
span.style.display="inline";
}
else if(valuue_name=="")
{
flag_name=false;
span.innerHTML="登录名不能为空";
span.style.display="inline";
}
else{
flag_name=false;
span.innerHTML="登录名格式错误";
span.style.display="inline";
}
}
var flag_password1=false
inputs[1].onblur=function(){
var span=document.getElementById("password1");
var value_password1=this.value;
var reg_password=/^[A-z]+[0-9]+.*/g;
if(value_password1=="")
{
flag_password1=false;
span.innerHTML="密码不能为空";
span.style.display="inline";
}
else if(reg_password.test(value_password1))
{
if(value_password1.length>16||value_password1.length<6){
flag_password1=false;
span.innerHTML="密码需6-16位";
span.style.display="inline";
}
else{
flag_password1=true;
span.innerHTML="√";
span.style.display="inline";
}
}
else{
flag_password1=false;
span.innerHTML="密码格式错误";
span.style.display="inline";
}
}
var flag_password2=false;
inputs[2].onblur=function()
{
var value_password1=inputs[1].value;
var value_password2=this.value;
var span=document.getElementById("password2");
if(value_password2=="")
{
flag_password2=false;
span.innerHTML="密码不能为空";
span.style.display="inline";
}
else if(value_password2!=value_password1)
{
flag_password2=false;
span.innerHTML="密码不一致";
span.style.display="inline";
}
else{
flag_password2=true;
span.innerHTML="√";
span.style.display="inline";
}
}
var flag_ID=false;
inputs[3].onblur=function(){
var reg_ID=/^[1-9]\d{5}(((18|19)\d{2})|(20)[0-1]{1}[0-9]{1})((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/g;
var value_ID=this.value;
var span=document.getElementById("ID");
if(value_ID==""){
flag_ID=false;
span.innerHTML="身份证号码不能为空";
span.style.display="inline";
}
else if(reg_ID.test(value_ID)){
flag_ID=true;
span.innerHTML="√";
span.style.display="inline";
}
else {
flag_ID=false;
span.innerHTML="身份证号码格式错误";
span.style.display="inline";
}
}
var flag_tel=false;
inputs[4].onblur=function(){
var value_tel=this.value;
var span=document.getElementById("tel");
var reg_tel=/^[1-9][0-9]{10}/g
if(value_tel=="")
{
flag_tel=false;
span.innerHTML="固定电话不能为空";
span.style.display="inline";
}
else if(reg_tel.test(value_tel)){
flag_tel=true;
span.innerHTML="√";
span.style.display="inline";
}else
{
flag_tel=false;
span.innerHTML="固定电话格式错误";
span.style.display="inline";
}
}
var flag_mobile=false;
inputs[5].onblur=function(){
var value_mobile=this.value;
var span=document.getElementById("mobile");
var reg_mobile=/^(13|15|17)[0-9]{9}/g
if(value_mobile=="")
{
flag_mobile=false;
span.innerHTML="电话不能为空";
span.style.display="inline";
}
else if(reg_mobile.test(value_mobile)){
flag_mobile=true;
span.innerHTML="√";
span.style.display="inline";
}else
{
flag_mobile=false;
span.innerHTML="电话格式错误";
span.style.display="inline";
}
}
var falg_email=false;
inputs[6].onblur=function(){
var value=this.value;
var span = document.getElementById("email")
var reg=/@./g;
if(reg.test(value)){
span.innerHTML="√";
span.style.display="inline";
falg_email=true;
}
else if(value=="")
{
falg_email=false;
span.innerHTML="邮箱格式不能为空"
span.style.display="inline";
}
else{
falg_email=false;
span.innerHTML="邮箱格式不正确"
span.style.display="inline";
}
}
function check()
{
var flag=false;
if(flag_name&&flag_password1&&flag_password2&&falg_email&&flag_ID&&flag_mobile&&flag_tel)
flag=true;
else{
flag=false;
alert("请输入正确的注册信息");
}
return flag;
}
完整文件
link