JS form verification source code (with error prompt and password level)

Time:2020-8-3

Print first

index.html

Index
    




    
        
        
            
                
            
            
                XX high speed rail customer service center| 
                customer service
             
        
        
            Feedback [email protected]
            Hello, please log in to register
            
                
                    My XX
                    
                
                
                    
                        Outstanding orders
                        Completed order (change / return)
                        My insurance
                        Survey personal information
                        Account security
                        Top contacts 
                        Key passenger booking
                        Lost items search
                        Service inquiry
                        complaint
                        proposal
                    
                
            
            
                
                Mobile version
                
        
    



    
        Your current position:
        Passenger transport homepage > registration
    
    
        Account information
        
            *
            user name:
            
            6-30 letters, numbers or "\ , beginning with a letter
        
        
            *
            Login password:
            
            
            
            
            
        
        
            *
            Confirm password:
            
            
        
        
            *
            Surname and first name:
            
            Name filling rules
            
                1. Make sure that the unknown character in the name can not be input, it can be replaced by the rare character Pinyin or homophone.
2. After the input name is saved, if there is a Chinese character that cannot be displayed correctly by the system, the Pinyin or homonym of the Chinese character can be modified and saved.
3. If there are traditional characters in the name that cannot be input, it can be replaced by simplified Chinese.
4. If the name is long and the total number of Chinese characters and English characters exceeds 30 (one Chinese character is counted as two characters), it is necessary to input 30 consecutive characters according to the first Chinese character or English character in the name (blank character is not input), and the case of English characters is not distinguished
                
            
        
        
            *
            ID number:
            
                Second generation ID card
                Hong Kong and Macao pass
                Taiwan pass
                passport
            
        
        
            *
            ID number:
            
            
        
        
            *
            Mail box:
            
            
        
        
            *
            phone number:
            
            Please fill in the mobile phone number correctly. The SMS verification code will be sent to the mobile phone number later
        
        
            *
            Passenger type:
            
                adult
                children
                student
                Disabled soldiers
                Disabled people's police
            
            
        
        
            
            我已阅读并同意遵守《中国铁路customer service中心网站服务条款》
            
                next step
            
        
    



    About our website statement
    Copyright © 2019  test.com  All rights reserved

style.css

label {
  cursor: pointer; }

a{
  color:inherit;
}

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

/*Head*/
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);
}
/*Navigation left*/
.header-left{
  float:left;
  width:500px;
}

.logo{
  float:left;
  width:100px;
  margin-right:28px;
}

.logo-text{
  float:left;
  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);
}
/*Navigation right*/
.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;
}

.show-nav{
  cursor:pointer;
  position: relative;
  z-index: 5;
  float:left;
}
/*Hidden area*/
.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;
}
/*Center Icons and text vertically*/
.phone img, .phone a{
  vertical-align:middle;
}
/*Subject*/
.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_, #Total .item_.item_ {
    height: 30px; 
    font-size: 15px;
    color: rgb(251,116,3);
    font-weight: lighter;
    margin: 0;
    display: inline-block;
    margin-left: 473px;
}

#Total .item_.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);
}
/*Hidden name rule*/
.hide_div{
    position: absolute;
    width: 531px;
    font-size: 13px;
    left: 558px;
    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;
}

/*Bottom*/
footer{
    height: 113px;
    background: #eee;
    text-align: center;
    padding: 40px;
    color: rgb(110,110,110);
    border-top:2px solid rgb(36,135,201);
}

index.js

//Get element
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_ "); // get the subscripts of all prompt elements
//When the mouse leaves the input box, a validation is generated
//The format is correct true
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;

//Verify user name
userAccount.onblur=function(){
    var reg=/^[a-zA-Z]{1}\w{5,29}$/;
    if(this.value==''){
        Items [0]. InnerHTML ='user name cannot be empty ';
        items[0].style.color='red';
        test1=false;
    }else{
        if(!reg.exec(userAccount.value)){
            Items [0]. InnerHTML = 6-30 letters, numbers or "\ , at the beginning of the letter ';
            items[0].style.color='red';
            test1=false;
        }else{
            Items [0]. InnerHTML ='user input correct ';
            items[0].style.color='green';
            test1=true;
        }
    }
}
//Verify password
userPass.onblur=function(){
    //Default style
    first.style.backgroundColor='red';
    second.style.backgroundColor='#ccc';
    third.style.backgroundColor='#ccc';
    //Match 6-20 arbitrary characters
    var reg=/^\S{6,20}$/;
    if(this.value==''){
        Items [1]. InnerHTML ='password cannot be empty ';
        items[1].style.color='red';
        test2=false;
    }else{
        if(! reg.exec ( userPass.value )){// does not meet the requirements
            Items [1]. InnerHTML ='Please input 6-20 digits of numbers, letters or symbols';
            items[1].style.color='red';
            test2=false;
        }else{
            items[1].innerHTML='';
            test2=true;
            checkPwd(this.value);
        }
    }
}
//The password is weak and only matches numbers, letters or symbols
var pattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/;
//In cipher strength, pairwise combination
var pattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
//Password strength is high, three combinations of numbers, letters or symbols
var pattern3=/\W[0-9a-zA-Z]*/;
//Verify password强弱的函数
function checkPwd(value){
    If (pattern1. Test (value)) {// weak password strength
        first.style.backgroundColor='red';
        second.style.backgroundColor='#ccc';
        third.style.backgroundColor='#ccc';
    }Else if (pattern2. Test (value)) {// password strength
        first.style.backgroundColor='red';
        second.style.backgroundColor='rgb(251,116,3)';
        third.style.backgroundColor='#ccc';
    }Else if (pattern3. Test (value)) {// high password strength
        first.style.backgroundColor='red';
        second.style.backgroundColor='rgb(251,116,3)';
        third.style.backgroundColor='green';
    }
}
//Verify password again
userPass_.onblur=function(){
    if(this.value==''){
        Items [2]. InnerHTML ='password cannot be empty ';
        items[2].style.color='red';
        test3=false;
    }else{
        if(this.value!=userPass.value){
            Items [2]. InnerHTML ='two passwords input are inconsistent ';
            items[2].style.color='red';
            test3=false;
        }else{
            Items [2]. InnerHTML ='the two inputs are consistent ';
            items[2].style.color='green';
            test3=true;
        }
    }
}
//Verify name
userName.onblur=function(){
    var reg=/^[\u4e00-\u9fa5|a-zA-Z]{3,30}$/;
    if(this.value==''){
        Items [3]. InnerHTML ='name cannot be empty ';
        items[3].style.color='red';
        test4=false;
        items[3].id='show_div';
    }else{
        if(reg.exec(userName.value)){
            Items [3]. InnerHTML ='name entered correctly ';
            items[3].style.color='green';
            test4=true;
            Items [3]. Id = '"; // no more information will be prompted when the input is correct
        }else{
            Items [3]. InnerHTML = 'the name can only contain Chinese or English, and the characters are between 3-30! ';
            items[3].style.color='red';
            test4=false;
            items[3].id='show_div';
        }
    }
}
//Verify ID number
information.onblur=function(){
    var reg=/^\d{17}[0-9x]$/i;
    if(this.value==''){
        Items [4]. InnerHTML ='id number cannot be empty ';
        items[4].style.color='red';
        test5=false;
    }else{
        if(!reg.exec(information.value)){
            Items [4]. InnerHTML ='Please input 18 digit ID card number ';
            items[4].style.color='red';
            test5=false;
        }else{
            Items [4]. InnerHTML ='number entered correctly ';
            items[4].style.color='green';
            test5=true;
        }
    }
}
//Verify mailbox
email.onblur=function(){
    var reg=/^\[email protected]\w+.[a-zA-Z_]{2,4}$/;
    if(this.value==''){
        Items [5]. InnerHTML ='mailbox cannot be empty ';
        items[5].style.color='red';
        test6=false;
    }else{
        if(!reg.exec(email.value)){
            Items [5]. InnerHTML ='Please enter the correct email address';
            items[5].style.color='red';
            test6=false;
        }else{
            Items [5]. InnerHTML ='email format is correct ';
            items[5].style.color='green';
            test6=true;
        }
    }
}
//Verify mobile phone number
telephone.onblur=function(){
    var reg=/^1(3|4|5|6|7|8|9)\d{9}$/;
    if(this.value==''){
        Items [6]. InnerHTML ='mobile phone number cannot be empty ';
        items[6].style.color='red';
        test7=false;
    }else{
        if(!reg.exec(telephone.value)){
            Items [6]. InnerHTML ='the mobile phone number you entered is not a valid format! ';
            items[6].style.color='red';
            test7=false;
        }else{
            Items [6]. InnerHTML ='mobile phone format is correct ';
            items[6].style.color='green';
            test7=true;
        }
    }
}
//Click next
handup.onclick=function(){
    if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){
        location.href="http://www.imooc.com";    
    }else{
        Alert ('wrong! ).
    }
}

Another simple version

Layout

index.html

Index
    



    --Account information--
    
        *
        user name:
        
    
    
    
    
    
        *
        Login password:
        
    
    
    
    
    
        *
        Confirm password:
        
    
    
    
    
    
        *
        full name:
        
    
    
    
    
    
        *
        ID number:
        
    
    
    
    
    
        *
        Email:
        
    
    
    
    
    
        *
        phone number:
        
    
    
    
    
    
        
        I have read and agree to abide by the rules
        Confirm submission

style.css

label {
  cursor: pointer; }

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

a {
  color: inherit; }

body {
  background: rgba(0, 0, 0, 0.1); }

#Total {
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
  background: white;
  width: 60%;
  min-height: 800px;
  margin: 50px 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: #6385d1;
    color: white;
    width: 100%;
    letter-spacing: 5px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold; }
  #Total .item, #Total .item_ {
    width: 90%;
    margin: 10px auto;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    position: relative; }
    #Total .item.item, #Total .item_.item {
      margin-top: 20px; }
    #Total .item .important, #Total .item_ .important {
      color: #6385d1; }
    #Total .item input, #Total .item_ input {
      position: absolute;
      width: 50%;
      height: 40px;
      top: 50%;
      left: 15%;
      margin-top: -20px;
      font-size: 15px;
      outline: none;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      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_, #Total .item_.item_ {
      width: 60%;
      height: 30px;
      border-bottom: .5px solid #6385d1;
      border-radius: 2px;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.6);
      letter-spacing: 2px;
      font-weight: lighter;
      padding-left: 10px;
      margin: 0;
      margin-left: 5%; }
  #Total #end {
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    width: 100%;
    letter-spacing: 2px; }
    #Total #end #choose {
      margin-right: 20px; }
    #Total #end #handup {
      width: 130px;
      height: 30px;
      border: none;
      background: #6385d1;
      color: white;
      border-radius: 3px;
      margin-left: 10px; }

test.js

var userAccount =  document.querySelector ("# useraccount"), // get the user name
    userPass =  document.querySelector ("# userpass"), // get password
    userPass_  = document.querySelector ("#userPass_ "), // get the confirmation password
    userName =  document.querySelector ("ා username"), // get name
    information =  document.querySelector ("ා information"), // get the ID card number
    email =  document.querySelector ("ා email"), // get the email number
    telephone =  document.querySelector ("ා phone"), // get the mobile phone number
    items =  document.querySelectorAll (".item_ "), // get the subscripts of all prompt sections
    aCho = document.querySelector("#choose"), oBtn = document.querySelector("#handup");
var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false
    ;
userAccount.onfocus = function () {
    Items [0]. InnerHTML = "6-30 letters, numbers or '_ "";
    items[0].style.color = "green";
};
userAccount.onblur = function () {
    var reg = /^\w{6,30}$/;
    if (this.value == "") {
        Items [0]. InnerHTML: "please write your user name!";
        items[0].style.color = "red";
    } else {
        if (!reg.exec(userAccount.value)) {
            Items [0]. InnerHTML = "6-30 letters, numbers or '_ "";
            items[0].style.color = "red";
        } else {
            Items [0]. InnerHTML = correct format;
            items[0].style.color = "green";
            test1 = true;
        }
    }
};
//-------------------------------------------------------------End of account number;
userPass.onfocus = function () {
    Items [1]. InnerHTML: "6-20 letters, numbers or symbols";
    items[1].style.color = "green";
};
userPass.onblur = function () {
    var reg = /^\w{6,20}$/;
    if (this.value == "") {
        Items [1]. InnerHTML: "please write your password!";
        items[1].style.color = "red";
    } else {
        if (!reg.exec(userPass.value)) {
            Items [1]. InnerHTML: "please input 6-20 letters, numbers or symbols";
            items[1].style.color = "red";
        } else {
            Items [1]. InnerHTML = correct format;
            items[1].style.color = "green";
            test2 = true;
        }
    }
};
/*------------------------------------------------------------------End of password*/
userPass_.onfocus = function () {
    Items [2]. InnerHTML: "please confirm that the password is the same twice";
    items[2].style.color = "green";
};
userPass_.onblur = function () {
    if (this.value == "") {
        Items [2]. InnerHTML: "please confirm the password again";
        items[2].style.color = "red";
    } else {
        if (this.value != userPass.value) {
            Items [2]. InnerHTML: "the two passwords are not the same";
            items[2].style.color = "red";
        } else {
            Items [2]. InnerHTML = correct format;
            items[2].style.color = "green";
            test3 = true;
        }
    }
};
/*-----------------------------------------------------------------------Confirm password end*/
userName.onfocus = function () {
    Items [3]. InnerHTML: "please enter your Chinese name";
    items[3].style.color = "green";
};
userName.onblur = function () {
    var reg = /^[\u4e00-\u9fa5]{2,5}$/;
    if (this.value == "") {
        Items [3]. InnerHTML: "please write your name";
        items[3].style.color = "red";
    } else {
        if (!reg.exec(userName.value)) {
            Items [3]. InnerHTML: "please input the Chinese name and make sure it is in the correct format";
            items[3].style.color = "red";
        } else {
            Items [3]. InnerHTML = correct format;
            items[3].style.color = "green";
            test4 = true
        }
    }
};
//---------------------------------------------------------------------------------End of name
information.onfocus = function () {
    Items [4]. InnerHTML: "please input your ID card number";
    items[4].style.color = "green";
};
information.onblur = function () {
    var reg = /^\d{17}[0-9x]$/;
    if (this.value == "") {
        Items [4]. InnerHTML: "please write your ID card number!";
        items[4].style.color = "red";
    } else {
        if (!reg.exec(information.value)) {
            Items [4]. InnerHTML: "please input the correct format of ID card number";
            items[4].style.color = "red";
        } else {
            Items [4]. InnerHTML = correct format;
            items[4].style.color = "green";
            test5 = true;
        }
    }
};
//------------------------------------------------------------------------End of ID card number
email.onfocus = function () {
    Items [5]. InnerHTML: "please input the correct format of your email address";
    items[5].style.color = "green";
};
email.onblur = function () {
    var reg = /^\[email protected]\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
    if (this.value == "") {
        Items [5]. InnerHTML: "please write to your email!";
        items[5].style.color = "red";
    } else {
        if (!reg.exec(email.value)) {
            Items [5]. InnerHTML: "please input the correct format of the email address";
            items[5].style.color = "red";
        } else {
            Items [5]. InnerHTML = correct format;
            items[5].style.color = "green";
            test6 = true;
        }
    }
};
//----------------------------------------------------------------------End of mailbox
telephone.onfocus = function () {
    Items [6]. InnerHTML: "please input your mobile phone number";
    items[6].style.color = "green";
};
telephone.onblur = function () {
    var reg = /^\d{11}$/;
    if (this.value == "") {
        Items [6]. InnerHTML: "please input 11 digit mobile phone number!";
        items[6].style.color = "red";
    } else {
        if (!reg.exec(telephone.value)) {
            Items [6]. InnerHTML: "please input 11 digit mobile phone number";
            items[6].style.color = "red";
        } else {
            Items [6]. InnerHTML = correct format;
            items[6].style.color = "green";
            test7 = true;
        }
    }
};
oBtn.onclick = function () {
    if (aCho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false
        || test6 == false || test7 == false) {
        "Your information is wrong"
    } else {
        Alert ("registration succeeded!")
    }
};