Front end: registration verification page (html+css+javascript)

Article directory

After a day's writing, I finally finished it. I still feel a little achievement, but I also find that I am still very inadequate. I will continue to work hard.

Similar to this web page effect.

Code segment

css implementation of inverted triangle

<!DOCTYPE html>
<html>
<head>
<style>


div{
	width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color:  black  transparent transparent transparent
}
</style>
</head>
<body>

<div></div>


</body>
</html>

css style summary

1. Text align last: justify;
2. span cannot set width and height, so display: inline block needs to be set;

List of items

-js
--main.js
-css
--main.css
-img
--logo.png
--phone.png
-main.html

Complete code

main.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Registration page</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <!-- Page header -->
    <div class="header">
      <div class="wrap">
        <div class="header-content header-left">
          <img src="img\logo.png"/>
          <div>Muke high speed rail customer service center&nbsp;|<span>customer service</span></div>
        </div>
        <div class="header-content header-right">
          <img src="img\phone.png">
          <div>Mobile version</div>
        </div>
        <div class="header-content header-middle">
          <div class="account">
            <a href="#"></a>
            <div class="menu-list" id="menu-list">
              <div class="menu-list-items">Unfinished order</div>
              <div class="menu-list-items">Completed order (changed/Retreat)</div>
              <div class="menu-list-items">My insurance</div>
              <div class="menu-list-items">View personal information</div>
              <div class="menu-list-items">Account security</div>
              <div class="menu-list-items">Top contacts </div>
              <div class="menu-list-items">Key passenger appointment</div>
              <div class="menu-list-items">Lost items search</div>
              <div class="menu-list-items">Service query</div>
              <div class="menu-list-items">Complaint</div>
              <div class="menu-list-items">proposal</div>
            </div>
          </div>
          <div class="tab">
            Feedback&nbsp;&nbsp; <span>imooc@com</span>&nbsp;&nbsp;&nbsp;&nbsp;
            Hello, please. <span>Land</span>&nbsp;&nbsp;|&nbsp;&nbsp;
            register&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </div>
      </div>
    </div>
    <!-- Dividing line -->
    <div class="line">
    </div>
    <!-- subject -->
    <div class="main">
      <div class="wrap">
        <div class="intro">
          Your current location:&nbsp;<span>Passenger home page</span>&nbsp;>&nbsp;<span>register</span>
        </div>
        <div class="form">
          <div class="title">
            Account information
          </div>
          <div class="table">
            <!--User name-->
            <div class="form-content">
              <span class="form-label">User name</span>:
              <input class="form-input"  id="form-input-userName" placeholder="User name cannot be modified after setting successfully">
              <span class="form-tips">6-30 A letter, number, or"-",Beginning of letter</span>
            </div>
            <!--Login password-->
            <div class="form-content">
              <span class="form-label">Login password</span>:
              <input class="form-input" id="form-input-pwd" placeholder="6-20 A letter, number, or symbol">
              <!-- <span class="form-tips"></span> -->
              <span class="level">
                <span class="low"></span>
                <span class="middle"></span>
                <span class="high"></span>
              </span>
            </div>
            <div id="pwd-error-code">
            </div>
            <!--Confirm password-->
            <div class="form-content">
              <span class="form-label">Confirm password</span>:
              <input class="form-input" id="form-input-pwd2" placeholder="Please enter your login password here">
              <span class="form-tips"></span>
            </div>
            <!--Full name-->
            <div class="form-content" id="name-tips-contents">
              <span class="form-label">Full name</span>:
              <input class="form-input" id="form-input-name" placeholder="Please enter a name">
              <span class="form-tips"><a id="form-name-tips" href="#"> name filling rules</a></span>
              <div id="hidden-name-tips">
                1.If the remote characters in the name cannot be input, they can be replaced by pinyin or homophone.<br/>
                2.After saving the input name, if there is any Chinese character that cannot be displayed correctly by the system, you can use the Pinyin or homophonic character of the Chinese character to modify it and save it.<br/>
                3.If there are traditional characters in the name that cannot be entered, you can use simplified instead.<br/>
                4.If the name is long and the total number of Chinese characters and English characters is more than 30 (one Chinese character is two characters), the first Chinese character or English character in the name shall be input continuously for 30 characters in sequence (the space character is not input), and the English characters shall be input without case difference
              </div>
            </div>
            <!--Document type-->
            <div class="form-content">
              <span class="form-label">Document type</span>:
              <select class="form-input" id="form-input-cards">
                <option value="idcard">Second generation ID card</option>
                <option value="HMPass">Hong Kong and Macao pass</option>
                <option value="TaiwanPass">Taiwan pass</option>
                <option value="passport">passport</option>
              </select>
              <span class="form-tips"></span>
            </div>
            <!--Identification Number-->
            <div class="form-content">
              <span class="form-label">Identification Number</span>:
              <input class="form-input" id="form-input-userId" placeholder="Please enter your ID number">
              <span class="form-tips"></span>
            </div>
            <!--mailbox-->
            <div class="form-content">
              <span class="form-label">mailbox</span>:
              <input class="form-input" id="form-input-mail" placeholder="Please fill in the email address correctly">
              <span class="form-tips"></span>
            </div>
            <!--Phone number-->
            <div class="form-content">
              <span class="form-label">Phone number</span>:
              <input class="form-input" id="form-input-phone" placeholder="Please enter your mobile number">
              <span class="form-tips">Please fill in the mobile phone number correctly. You will send the SMS verification code to the mobile phone later</span>
            </div>
            <!--Passenger type-->
            <div class="form-content">
              <span class="form-label">Passenger type</span>:
              <select class="form-input" id="form-input-visiters">
                <option value="adult">Adult</option>
                <option value="student">children</option>
                <option value="child">Student</option>
                <option value="army">Disabled servicemen</option>
                <option value="police">Disabled people's police</option>
              </select>
              <span class="form-tips"></span>
            </div>
            <!-- Read and submit -->
            <div id="form-end">
              <input type="checkbox" id="choose">
              <label for="choose">I have read and agree to abide by the regulations <span><China Railway Customer Service Center website service terms</span></label>
              <br/>
              <button id="handup">Next step</button>
            </div>
          </div>

        </div>



      </div>
    </div>
    <!-- Dividing line -->
    <div class="line">
    </div>
    <!-- Page tail -->
    <div class="footer">
      <div class="Copyright">
        About us|Website statement<br/>
        Copyright (c) 2018 Copyright Holder All Rights Reserved.
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/main.js"></script>
</html>

main.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;/*Prevent borders from exceeding*/
}

.header{
  width: 100%;
  height: 80px;
  line-height: 50px;
  background-color: #E8E8E8;
  font-size: 12px;
}
.wrap{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  /* background-color:blue; */
}
.header .header-content{
  height: 80px;
  line-height: 80px;
}
.header-left{
  float: left;
}
.header-left img{
  width: 60px;
  height: 60px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-block;
  float: left;
}

.header-left div{
  float: left;
  font-size: 18px;
  font-weight: bold;
}

.header-left div span{
  font-size: 12px;
  font-weight:normal;
}
.header-middle{
  float: right;
  margin-right:20px;
  position: relative;
}
.header-middle span{
  color:rgb(251,116,3);
}
.header-middle a{
  text-decoration: none;
}
.header-middle .menu{
  display: inline-block;
  color:black;
  padding-right: 20px;
  width:130px;
  position: relative;
}
.tab{
  float: right;
}
.account{
  float: right;
}
.triangle{
  position: absolute;
  top:36px;
  margin-left: 10px;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color:  black  transparent transparent transparent
}
.menu-list{
  position: absolute;
  right: 0px;
  top:60px;
  width: 130px;
  padding-left: 10px;
  padding-top:10px;
  border: 1px solid rgb(36,135,201);
  background-color: white;
  visibility: hidden;
}
.menu-list .menu-list-items{
  width: 116px;
  height: 30px;
  border-bottom: 1px dotted #ccc;
  line-height: 30px;
}
.menu-list-items:nth-of-type(3n+1){
  height: 30px;
  border-bottom: none;
}

.header .header-right{
  float: right;
}
.header-right img{
  width: 15px;
  height:21px;
  margin-top: 30px;
  float: left;
}
.header-right div{
  float: left;
  margin-right: 20px;
}
.line{
  width:100%;
  height: 2px;
  background-color: rgb(36,135,201);
  /* display: inline-block; */
}
.main{
  width: 100%;
  height: 550px;
}
.main .intro{
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
}
.main .intro span{
  font-weight: normal;
}
.main .form{
  border: 1px solid rgb(251,116,3);
  border-radius:5px;
  height: 420px;
}
.main .form .title{
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-radius:5px;
  background-color: rgb(251,116,3);
  color:white;
  font-size: 16px;
  padding-left: 10px;

}
.main .form .table{
  width: 560px;
  margin: 20px auto;
}

.main .table .form-content{
  height:30px;
  line-height: 30px;
  font-size: 12px;
}

.form-content:not(:nth-of-type(8))::before{
  content:"*";
  color:rgb(251,116,3);
}
.form-content:nth-of-type(8){
  margin-left: 8px;
}

.table .form-content .form-label{
  display: inline-block;
  width: 50px;
  /* Text align last: justify; */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

.table .form-content .form-input{
  width: 200px;
}
.form-content .form-input{
  font-size: 12px;
}
.table .form-tips{
  font-size: 12px;
  color:rgb(251,116,3);
}

.form-tips a{
  color:rgb(251,116,3);
}
.form-content .level{
  width: 200px;
  height: 10px;
  /* span You cannot set the width and height, so you need to set display: inline block; */
  display: inline-block;
  /* visibility:hidden; */
}
.form-content .level span{
  width:30px;
  height: 8px;
  background-color: grey;
  margin-right: 5px;
  display: inline-block;
}
#name-tips-contents{
  position: relative;
}
#hidden-name-tips{
  position: absolute;
  left: 340px;
  top:17px;
  font-size: 12px;
  width: 380px;
  padding: 10px;
  border: 1px solid rgb(36,135,201);
  background-color: white;
  visibility: hidden;
}

#pwd-error-code{
  margin-left: 100px;
  font-size: 12px;
}

#form-end{
  text-align: center;
  margin-top: 20px;
}
#form-end button{
  margin-top: 10px;
  width: 150px;
  height: 30px;
  line-height: 30px;
  color:white;
  background-color: rgb(251,116,3);
  border-radius: 5px;

}
#form-end label{
  font-size: 14px;
}
#form-end label span{
  color:rgb(36,135,201);
}
.footer{
  width: 100%;
  height: 80px;
  font-size: 12px;
  background-color: #E8E8E8;
  text-align: center;
  padding-top: 20px;
}


}

main.js

var input = {
    userName:{
      element:'form-input-userName',
      // 6-30 letters, numbers or '', beginning with a letter.
      pattern:/^[a-z]\w{5,29}$/,
      correct:'User name entered correctly',
      error: '6-30 A letter, number, or"_"´╝îBeginning of letter'
    },
    pwd:{
      element:'form-input-pwd',
      // 6-20 letters, numbers or symbols
      pattern:/^\S{6,20}$/,
      correct:'',
      error:"Please input 6-20 A letter, number, or symbol"
    },
    pwd2:{
      element:'form-input-pwd2',
      correct:'The two inputs are the same',
      error:"The two inputs are inconsistent, please re-enter"
    },
    name:{
      element:'form-input-name',
      // The name can only contain Chinese or English characters, with Chinese characters between 2-15 and English characters between 3-30
      pattern: /^[\u4e00-\u9fa5]{2,15}|[a-zA-Z]{3,30}$/,
      correct:"Name entered correctly",
      error: 'Name can only contain Chinese or English,And the character is 3-30 Between!'
    },
    cards:{
      element:'form-input-cards'
    },
    userId:{
      element:'form-input-userId',
      // 18 digits. The last digit can be an x in upper or lower case.
      pattern: /^\d{17}[X\d]$/,
      correct:'Correct number input',
      error: 'Please enter 18 digit ID number'
    },
    mail:{
      element:'form-input-mail',
      // @The symbol can be preceded by a number or case letter, the symbol "_or -", @ followed by a number or case letter,
      // The symbol "_or -" plus the symbol "." is followed by a number, upper and lower case letter, and the symbol "_or -" ends
      pattern: /^[a-z0-9_-]+@[a-z0-9_-]+\.[a-z0-9_-]+$/i,
      correct:'Email format is correct',
      error: 'Please enter the correct email'
    },
    phone:{
      element:'form-input-phone',
      // The first digit must be the number 1, the second digit cannot be 1 and 2, and must be an 11 digit number
      pattern: /^1[^1|^2]\d{9}$/,
      correct:'The format of mobile phone is correct',
      error: 'The mobile number you entered is not in a valid format!'
    },
    visiters:{
      element:'form-input-visiters'
    }
  }

//Get node
var inputElements = document.getElementsByClassName("form-input");
var submitBtn = document.getElementById('handup');
var pwd1 = document.getElementById(input['pwd'].element);
var pwdErr = document.getElementById('pwd-error-code');
var pwdLevel = document.getElementsByClassName('level')[0];
var formNameTips = document.getElementById('form-name-tips');
var checkbox = document.getElementById('choose');
var tipsContents = document.getElementById("hidden-name-tips");
var account = document.getElementsByClassName('account')[0];
var menuList = document.getElementById('menu-list');




window.onload= function(){
  // Add validation event for input
  eachInputAddVerifyListener();
  //Bind the event to the submit button. After clicking the button, all Input must be verified once
  submitBtn.addEventListener("click",submitHandler);
  //When you slide past the name filling rule, tips is displayed
  // General onmouseout and mouseover
  formNameTips.onmouseover = function(){
    tipsContents.style.visibility="visible";
  }
  formNameTips.onmouseout = function(){
    tipsContents.style.visibility="hidden";
  }

  account.onmouseover = function(){
    menuList.style.visibility="visible";
  }
  account.onmouseout = function(){
    menuList.style.visibility="hidden";
  }

}

function eachInputAddVerifyListener(){
  for(var i=0;i<inputElements.length;i++){
    inputElements[i].addEventListener("blur",function(){
      formValidByObj(this);
    })
  }
}

//Form Validation
function formValidByObj(ele){
  var idx =(ele.id).split("-")[2];
  console.log(idx);
  var content = ele.value;
  //Find the elements of form tips in sibling nodes
  var formTips = ele.parentNode.querySelector('.form-tips');
  var flag = false;
  if(idx=="pwd2"){
    //Process confirmation password
    if(ele.value==""){
      formTips.innerHTML="Input box cannot be empty";
      formTips.style.color = "red";
      return flag;
    }else{

      if(pwd1.value==ele.value){
        flag=true;
      }else{
        flag=false;
      }
    }
  }else if(idx=="cards" || idx=='visiters'){
    return true;
  }else{
    var pattern = input[idx].pattern;
    flag = pattern.test(content);
  }

  //Different password processing methods
  if(idx=="pwd"){
    handlePwd(flag,formTips,content);
  }else{
    if(flag){
      formTips.innerHTML=input[idx].correct;
      formTips.style.color = "green";
    }else{
      formTips.innerHTML=input[idx].error;
      formTips.style.color = "red";
    }
  }


  return flag;
}

//Password processing,
function handlePwd(flag,formTips,content) {
  checkCodeLevel(content);
  if(flag){
    // console.log(formTips);
    pwdErr.innerHTML=input['pwd'].correct;

  }else{
    pwdErr.innerHTML=input['pwd'].error;
    pwdErr.style.color = "red";

  }
}
//Verify password complexity level
function checkCodeLevel(content){
  if(/^[1-9]+$/.test(content) || /^[a-zA-Z]+$/.test(content) || /^\W+$/.test(content)){
    //The password is low.
      pwdLevel.children[0].style.backgroundColor="red";
      pwdLevel.children[1].style.backgroundColor="grey";
      pwdLevel.children[2].style.backgroundColor="grey";
  }else if(/^[1-9|a-z]+$/i.test(content) || /^[\W|a-z]+$/i.test(content) || /^[\W|1-9]+$/i.test(content)){
    //The password is in the middle.
      pwdLevel.children[0].style.backgroundColor="red";
      pwdLevel.children[1].style.backgroundColor="orange";
      pwdLevel.children[2].style.backgroundColor="grey";
  }else if(/\W[a-zA-Z]*/.test(content)){
    //The password is high.
    pwdLevel.children[0].style.backgroundColor="red";
    pwdLevel.children[1].style.backgroundColor="orange";
    pwdLevel.children[2].style.backgroundColor="green";
  }
}

//Click submit to verify all forms
function submitHandler(){
  console.log("submit");
  var res = true;;
  for(var i=0;i<inputElements.length;i++){
    //  console.log(inputElements[i]);
    var currFlag = formValidByObj(inputElements[i]);
    if(currFlag==false){
      res = false;
    }
    //    console.log(res);
  }
  // console.log(checkbox.checked);
  //Judge whether the checkbox is selected
  if(checkbox.checked && res==true){
    window.open("https://www.imooc.com",'_self');
  }


}

Published 24 original articles, won praise 10, visited 30000+
Private letter follow

Tags: Mobile Javascript

Posted on Wed, 29 Jan 2020 08:16:45 -0800 by mmtalon