网页制表验证联系-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43610614/article/details/111726642

文章目录

要求

在这里插入图片描述

实现

在这里插入图片描述

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> 
                <!-- <br> -->
                <p>登录密码：</p> 
                <!-- <br> -->
                <p>确认密码：</p> 
                <!-- <br> -->
                <p>身份证号码：</p> 
                <!-- <br> -->
                <p>固定电话：</p> 
                <!-- <br> -->
                <p>手机号码：</p> 
                <!-- <br> -->
                <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%;
    /* background-color: aqua; */
}
#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%;
    /* background-color: blue;   */
}
#form div:nth-child(2) div:first-child{
    height: 100%;
    width:30%;
     /* background-color: red;   */
    float: left;
    /* padding-top: 10px;  */
}
#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;
   /* margin-bottom: 8px; */
    text-align: right;
}
#form div:nth-child(2) div:nth-child(2){
    height: 175px;
    width:32%;
    /* background-color: yellow;   */
    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%;
    /* background-color: green;  */
    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;
     /* background-color: crimson;  */
}
#form div:last-child img{
    margin-left: 180px;
     /* background-color: crimson;  */
}
#form div:last-child input{
    width: 100px;
    height: 32px;
    margin-left: 180px;
     /* background-color: crimson;  */
}

js代码

var inputs = document.getElementsByTagName("input");
// console.log(inputs)
//验证登录名，不能含有数字长度4-8位
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"; 
    }
}
//密码不能为空，并且密码包含的字符大等于6个且少等于16,两次输入的密码必须一致
// console.log(inputs[1]);
var flag_password1=false
inputs[1].onblur=function(){
    // console.log(value_password1);
    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";  
         }
}
//验证身份证号码日期1800-2020 18位最后一位可以是x或数字
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";
    }
}
//验证固定电话不以0开头长11位
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";
    }
}
//验证电话13 15 17 18开头
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";
    }
}
//验证email：必须有@.且顺序正确，不能为空
var falg_email=false;//email正确返回true,否则false
inputs[6].onblur=function(){
var value=this.value;
var span = document.getElementById("email")
var reg=/@./g;
if(reg.test(value)){
    // console.log(value.match(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;
}