JS表单验证 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="1.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<!-- 头部 -->
<header>
    <div class="header-wrap">
        <!-- 左侧 -->
        <div class="header-left">

            <div class="logo"></div>

            <div class="logo-text">
                <span class="strong">XX高铁客户服务中心 | </span>
                <span>客户服务</span>
            </div> 

        </div>

        <div class="header-right">
            <span>意见反馈&nbsp;&nbsp;<a href="#">test@com</a></span>
            <span>您好，<a href="#">&nbsp;登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">注册</a></span>
            <div class="show-nav">

                <a href="#">
                    <span>我的XX</span>
                    <i class="iconfont icon-jiantouarrow486"></i>
                </a>

                <div class="hide_nav">
                    <ul>
                        <li class="first-li">未完成订单</li>
                        <li>已完成订单（改/退）</li>
                        <li class="line">我的保险</li>
                        <li class="line">查勘个人信息</li>
                        <li>账户安全</li>
                        <li class="line">常用联系人</li>
                        <li class="line">重点旅客预约</li>
                        <li>遗失物品寻找</li>
                        <li class="line">服务查询</li>
                        <li class="line">投诉</li>
                        <li>建议</li>
                    </ul>
                </div>

            </div>

            <span class="phone">
                <img src="img/phone.png">
                <a href="#">手机版</a>
            </span>    
        </div>
    </div>
</header>

<!-- 主体部分 -->
<div class="content">

    <p class="title">
        <span class="strong">您现在的位置：</span>
        <span>客运首页 > 注册</span>
    </p>

    <div id="Total">
        <div id="Title">账户信息</div>

        <div class="item">
            <span class="important">*</span>
            <label for="userAccount">用 户 名 :</label>
            <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
            <span class="item_">6-30位字母、数字或“_”，字母开头</span>
        </div>

        <div class="item" style="margin-bottom: -28px;">
            <span class="important">*</span>
            <label for="userPass">登陆密码 :</label>
            <input type="password" id="userPass" placeholder=" 6-20位字母、数字或符号" style="top: 15px;">
            <span id="first"></span>
            <span id="second"></span>
            <span id="third"></span>
            <span class="item_" style="display: block;margin-top: 39px;margin-left: 161px;"></span>
        </div>

        <div class="item">
            <span class="important">*</span>
            <label for="userPass_">确认密码 :</label>
            <input type="password" id="userPass_" placeholder=" 再次输入您的登录密码">
            <span class="item_"></span>
        </div>

        <div class="item">
            <span class="important">*</span>
            <label for="userName">姓　　名 :</label>
            <input type="text" id="userName" placeholder=" 请输入姓名">
            <span class="item_" id="show_div"><a href="#" class="line">姓名填写规则</a></span>
            <div class="hide_div">
                <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br>
2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br>
3.姓名中有繁体字无法输入时，可用简体替代。<br>
4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写
                </p>
            </div>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="idinfo">身份证号 :</label>
            <select name="idinfo" id="idinfo">
                <option value="" selected="selected">二代身份证</option>
                <option value="">港澳通行证</option>
                <option value="">台湾通行证</option>
                <option value="">护照</option>
            </select>
        </div>
        <div class="item" style="margin-top: 51px;">
            <span class="important">*</span>
            <label for="information">证件号码 :</label>
            <input type="text" id="information" placeholder=" 请输入您的证件号码">
            <span class="item_"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="email">邮　　箱 :</label>
            <input type="email" id="email" placeholder="请输入正确邮箱格式">
            <span class="item_"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="telephone">手机号码 :</label>
            <input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
            <span class="item_">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="curtomer">旅客类型 :</label>
            <select name="curtomer" id="curtomer">
                <option value="" selected="selected">成人</option>
                <option value="">儿童</option>
                <option value="">学生</option>
                <option value="">残疾军人</option>
                <option value="">伤残人民警察</option>
            </select>
            <span class="item_"></span>
        </div>
        <div id="end">
            <input type="checkbox" id="choose">
            <label for="choose">我已阅读并同意遵守<a href="#">《中国铁路客户服务中心网站服务条款》</a></label>
            <div class="btn_box">
                <button id="handup">下一步</button>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer>
    <p>关于我们 | 网站声明</p>
    <p>Copyright &copy; 2019 test.com All rights reserved | 京ICP备 xxxxxxxx号</p>
</footer>
<script src="1.js"></script>
</body>
</html>
label {
  cursor: pointer; }

a{
  color:inherit;
}

@font-face {font-family: "iconfont";
  src: url('font/iconfont.eot'); /* IE9 */
  src: url('font/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box; }

/*头部*/
header{
  width:100%;
  height:120px;
  background-color:rgb(239,239,239);
  border-bottom:2px solid rgb(36,135,201);
}

.header-wrap{
  width:1200px;
  margin:0 auto;
}

.header-wrap span,
.header-wrap img{
  cursor:pointer;
}

.header-wrap a:hover{
  color:rgb(251,116,3);
}
/*导航左侧*/
.header-left{
  float:left;
  width:500px;
  position: relative;
}

.logo{
 float:left; 
 width:200px; 
 height: 80px;
 position: absolute;
 top: 10px;
 left: -150px; 
  margin-right:38px;
  background: url(img/logo.png)  135px 5px  no-repeat ;
}

.logo-text{
  float:left;
  margin-left: 60px;
  width:300px;
  color:rgb(110,110,110);
  height: 120px;
  line-height: 120px;
}

.logo-text .strong{
    font-size: 20px;
    font-weight: bold;
    color: rgb(80,80,80);
}
/*导航右侧*/
.header-right{
  float:right;
  width:700px;
  height: 120px;
  line-height: 120px;
  padding-left:60px;
  position: relative;
}

.header-right img{
  width:14px;
}

.header-right span{
  margin-right:30px;
  float:left;
}

.header-right a span{
    margin-right:5px;
}

.show-nav{
  cursor:pointer;
  position: relative;
  z-index: 5;
  float:left;
}
/*隐藏区域*/
.hide_nav{
  display: none;
  position: absolute;
  width: 154px;
  background-color: #fff;
  border: 1px solid rgb(251,116,3);
  left: 0;
  font-size: 14px;
  top: 86px;
}

.show-nav:hover .hide_nav{
  display: block;
}

.hide_nav ul{
  width: 100%;
  padding: 0 10px;
}

.hide_nav ul li{
  line-height: 37px;
  height: 37px;
  width: 100%;
  color:rgb(110,110,110);
  cursor:pointer;
}

.hide_nav ul li:hover{
  color:rgb(251,116,3);
}
.line{
  border-bottom:1px dotted rgb(110,110,110);
}
.phone{
  margin-left:20px;
}
/*图标和文字垂直居中对齐*/
.phone img, .phone a{
  vertical-align:middle;
}
/*主体*/
.content{
  width:1200px;
  background: white;
  margin:0 auto;
  height: 1115px;
}

.title{
  margin-top:20px;
  margin-left:5px;
}

.title span{
  color:rgb(110,110,110);
}

.title span.strong{
    font-size: 20px;
    font-weight: bold;
    color: rgb(80,80,80);
}

#Total {
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
    width: 1200px;
    min-height: 800px;
    margin: 30px auto;
    border-radius: 10px;
    overflow: hidden;
    border-left: 0.5px solid rgba(0, 0, 0, 0.32);
    border-right: 0.5px solid rgba(0, 0, 0, 0.32);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); 
}

#Total #Title {
    background: rgb(251,116,3);
    color: white;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    padding-left: 18px;
    margin-bottom: 60px; 
}

#Total .item, #Total .item_ {
    width: 90%;
    margin: 10px auto;
    font-size: 16px;
    font-weight: bold;
    position: relative; 
}

#Total .item.item, #Total .item_.item {
    margin-top: 25px; 
}


#Total .item .important, #Total .item_ .important {
    color: rgb(251,116,3);
    margin-left: 62px; 
}

#Total .item input, #Total .item_ input {
    position: absolute;
    width: 300px;
    height: 30px;
    top: 32%;
    left: 15%;
    margin-top: -20px;
    font-size: 15px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: box-shadow .5s; 
}

#Total .item input:focus, #Total .item_ input:focus {
    box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; 
}

#Total .item .item_ {
    height: 30px; 
    font-size: 15px;
    color: rgb(251,116,3);
    font-weight: lighter;
    margin: 0;
    display: inline-block;
    margin-left: 473px;
    position: relative;
    top: -21px;
}

/* #Total .item_{
    position: relative;
    top: -21px;
} */

.item_ a{
    text-decoration: underline;
}

select{
    width: 297px;
    margin-left: 10px;
    height: 34px;
    font-size: 14px;
    color: rgb(110,110,110);
}

#first{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: red;
    margin-left: 320px;
}

#second{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: #ccc;
}

#third{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: #ccc;
}

#Total #end {
    text-align: center;
    height: 160px;
    line-height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    width: 100%;
}

#Total #end #choose {
    margin-right: 6px; 
}

.btn_box{
  margin-top:20px;
}

#Total #end #handup {
    width: 197px;
    height: 30px;
    border: none;
    background: rgb(251,116,3);
    color: white;
    border-radius: 3px;
    margin-left: 10px; 
    cursor: pointer;
}

#Total #end #handup:hover{
    background: rgb(36,135,201);
}

#end a{
    color:rgb(36,135,201);
}
/*隐藏的姓名规则*/
.hide_div{
    position: absolute;
    width: 531px;
    font-size: 13px;
    left: 598px;
    border: 1px solid rgb(36,135,201);
    padding: 20px;
    line-height: 35px;
    top: 21px;
    color: rgb(110,110,110);
    display: none;
}

#show_div:hover+.hide_div{
    display: block;
}

/*底部*/
footer{
    height: 113px;
    background: #eee;
    text-align: center;
    padding: 40px;
    color: rgb(110,110,110);
    border-top:2px solid rgb(36,135,201);
}
//获取元素
var userAccount=document.getElementById('userAccount');//用户名
var userPass=document.getElementById('userPass');//密码
var userPass_=document.getElementById('userPass_');
var userName=document.getElementById('userName');//姓名
var information=document.getElementById('information');//证件号码
var email=document.getElementById('email');
var telephone=document.getElementById('telephone');
var handup=document.getElementById('handup');//下一步
var first=document.getElementById('first');
var second=document.getElementById('second');
var third=document.getElementById('third');
var choose=document.getElementById('choose');//同意书
var items=document.querySelectorAll(".item_");//获取所有提示元素的下标
//当鼠标离开输入框，产生验证
//格式正确 true
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;

//验证用户名
userAccount.onblur=function(){
    var reg=/^[a-zA-Z]{1}\w{5,29}$/;
    if(this.value==''){
        items[0].innerHTML='用户名不能为空';
        items[0].style.color='red';
        test1=false;
    }else{
        if(!reg.test(userAccount.value)){
            items[0].innerHTML='6-30位字母、数字或“_”，字母开头';
            items[0].style.color='red';
            test1=false;
        }else{
            items[0].innerHTML='用户输入正确';
            items[0].style.color='green';
            test1=true;
        }
    }
}
//验证密码
userPass.onblur=function(){
    //默认样式
    first.style.backgroundColor='red';
    second.style.backgroundColor='#ccc';
    third.style.backgroundColor='#ccc';
    //匹配6-20位任意字符
    var reg=/^\S{6,20}$/;
    if(this.value==''){
        items[1].innerHTML='密码不能为空';
        items[1].style.color='red';
        test2=false;
    }else{
        if(!reg.exec(userPass.value)){//不符合要求
            items[1].innerHTML='请输入6-20位数字、字母或符号';
            items[1].style.color='red';
            test2=false;
        }else{
            items[1].innerHTML='';
            test2=true;
            checkPwd(this.value);
        }
    }
}
//密码强度弱，只匹配数字、字母或符号
var pattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/;
//密码强度中，两两组合
var pattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
//密码强度高，数字、字母或符号三种组合
var pattern3=/\W[0-9a-zA-Z]*/;
//验证密码强弱的函数
function checkPwd(value){
    if(pattern1.test(value)){//密码强度弱
        first.style.backgroundColor='red';
        second.style.backgroundColor='#ccc';
        third.style.backgroundColor='#ccc';
    }else if(pattern2.test(value)){//密码强度中
        first.style.backgroundColor='red';
        second.style.backgroundColor='rgb(251,116,3)';
        third.style.backgroundColor='#ccc';
    }else if(pattern3.test(value)){//密码强度高
        first.style.backgroundColor='red';
        second.style.backgroundColor='rgb(251,116,3)';
        third.style.backgroundColor='green';
    }
}
//再次验证密码
userPass_.onblur=function(){
    if(this.value==''){
        items[2].innerHTML='密码不能为空';
        items[2].style.color='red';
        test3=false;
    }else{
        if(this.value!=userPass.value){
            items[2].innerHTML='两次密码输入不一致';
            items[2].style.color='red';
            test3=false;
        }else{
            items[2].innerHTML='两次输入一致';
            items[2].style.color='green';
            test3=true;
        }
    }
}
//验证姓名
userName.onblur=function(){
    var reg=/^[\u4e00-\u9fa5|a-zA-Z]{3,30}$/;
    if(this.value==''){
        items[3].innerHTML='姓名不能为空';
        items[3].style.color='red';
        test4=false;
        items[3].id='show_div';
    }else{
        if(reg.exec(userName.value)){
            items[3].innerHTML='姓名输入正确';
            items[3].style.color='green';
            test4=true;
            items[3].id='';//输入正确时不再提示信息
        }else{
            items[3].innerHTML='姓名只能包含中文或者英文，且字符在3-30个之间！';
            items[3].style.color='red';
            test4=false;
            items[3].id='show_div';
        }
    }
}
//验证身份证号
information.onblur=function(){
    var reg=/^\d{17}[0-9x]$/i; // \d数字
    if(this.value==''){
        items[4].innerHTML='证件号码不能为空';
        items[4].style.color='red';
        test5=false;
    }else{
        if(!reg.exec(information.value)){
            items[4].innerHTML='请输入18位身份证号码';
            items[4].style.color='red';
            test5=false;
        }else{
            items[4].innerHTML='号码输入正确';
            items[4].style.color='green';
            test5=true;
        }
    }
}
//验证邮箱
email.onblur=function(){
    var reg=/^\w+@\w+.[a-zA-Z_]{2,4}$/;
    if(this.value==''){
        items[5].innerHTML='邮箱不能为空';
        items[5].style.color='red';
        test6=false;
    }else{
        if(!reg.exec(email.value)){
            items[5].innerHTML='请输入正确的邮箱';
            items[5].style.color='red';
            test6=false;
        }else{
            items[5].innerHTML='邮箱格式正确';
            items[5].style.color='green';
            test6=true;
        }
    }
}
//验证手机号
telephone.onblur=function(){
    var reg=/^1(3|4|5|6|7|8|9)\d{9}$/;
    if(this.value==''){
        items[6].innerHTML='手机号码不能为空';
        items[6].style.color='red';
        test7=false;
    }else{
        if(!reg.exec(telephone.value)){
            items[6].innerHTML='您输入的手机号码不是有效的格式！';
            items[6].style.color='red';
            test7=false;
        }else{
            items[6].innerHTML='手机格式正确';
            items[6].style.color='green';
            test7=true;
        }
    }
}
//点击下一步
handup.onclick=function(){
    if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){
        location.href="http://www.imooc.com";    
    }else{
        alert('填写有误！');
    }
}

 

posted @ 2020-02-21 12:45  apple78  阅读(160)  评论(0)    收藏  举报