js realizes the input verification and data acquisition of the registration page

initial registration page

Verification effect (fill in the information is written casually)

The effect of the correct format (the information is filled in casually)

Effect after clicking the register button

code show as below:

registration page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="box">
        <h1>注&nbsp;&nbsp;册</h1>
      <form method="get" action="../html/success.html" onsubmit="return tijiao()">
        <p>请选择注册角色</p>
        <input type="radio" name="object" value="student">学生
        <input type="radio" name="object" value="teacher">老师
        <input type="radio" name="object" value="manager">管理员
         <p>用户名</p>
         <input  class="input_box username" type="text" name="username" placeholder=" 请输入用户名(6位字母、中文或者数字组成) *必填"/><br>
         <span class="username1"></span>
         <p>手机号</p>
         <input   class="input_box phone" name="phone" type="text" placeholder=" 请输入手机号(11位数字) *必填"/><br>
         <span class="phone1"></span>
         <p>邮箱</p>
         <input  class="input_box email" name="email" type="text" placeholder=" 请输入邮箱 *必填"/><br>
         <span class="email1"></span>
         <div class="mima">
          <p>密码</p>
          <input  class="input_box password"  name="password" type="password" placeholder=" 请输入密码(6-12位字母、下划线或者数字组成) *必填"/><br>
          <span class="password1"></span>
          <img src="../image/遮挡.png" alt="" class="tu">
         </div>
         <div class="mima">
          <p>确认密码</p>
          <input class="input_box nextpassword" type="password" placeholder=" 请再次输入密码 *必填"/><br>
          <span class="nextpassword1"></span>
          <img src="../image/遮挡.png" alt="" class="tu1">
         </div>
         <p>备注</p>
         <textarea  cols="65" rows="5" placeholder="备注（可以不填）"></textarea><br>
         <input class="cm" type="checkbox"/>Check me out<br>
         <input class="zc" type="submit" value="注册"/>
      </form>
    </div>
    
<script>
  // 用户名检验函数
  function usernameCheck(){
    let str1 = username.value;
    const bds1 = /^[\u4e00-\u9fa5a-zA-Z0-9]{6}$/;
    if(str1 == ""){
      return '用户名不能为空！'
    }else if(str1.length < 6){
       return '用户名少于6位!'
    }else if(str1.length > 6){
      return '用户名多于6位!'
    }else if(bds1.test(str1)){
        return '输入格式正确!'
     }else{
      return '输入格式错误!'
    }
  }
    // 手机号检验函数
  function phoneCheck(){
    let str2 = phone.value;
    const bds2 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    const b = /[a-z]|[A-Z]/;
    if(str2 === ""){
       return '手机号不能为空！'
    }else if(str2.length < 11){
       return '手机号少于11位!'
    }else if(str2.length > 11){
      return '手机号多于11位!'
    }else if(b.test(str2)){
      return '手机号中不能有字母!'
    }else if(bds2.test(str2)){
      return '输入格式正确!'
    }else{
      return '输入格式错误!'
    }
  }
    // 邮箱检验函数
  function emailCheck(){
     let str3 = email.value;
     let bds3 =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
     let p = /[@]{1}/;
     if(str3 == ""){
      return '邮箱不能为空！'
     } else if(bds3.test(str3)){
        return '输入格式正确!'
     }else if(!p.test(str3)){
        return '缺少@！'
     }else{
      return '输入格式错误!'
    }
    }
      // 密码检验函数
  function passwordCheck(){
     let str4 = password.value;
     const bds4 = /^\w{6,12}$/ ;
     const m = /^[0-9]{6,12}$/;
     const n = /^([a-z]|[A-Z]){6,12}$/;
     if(str4 === ""){
       return '密码不能为空！'
    }else if(str4.length < 6){
       return '密码少于6位!'
    }else if(str4.length > 12){
      return '密码多于12位!'
    }else if(m.test(str4)){
      return '密码不能全是数字'
    }else if(n.test(str4)){
      return '密码不能全是字母'
    }else if(bds4.test(str4)){
      return '输入格式正确!'
    }else{
      return '输入格式错误!'
    }
  }
    // 确认密码检验函数
      function nextpasswordCheck(){
        let str5 = password.value;
        let str6 = nextpassword.value;
        if(str6 == ""){
          return '密码不能为空！'
        }else if(str5 === str6){
          return '输入正确!'
        }else{
          return '两次输入不同，请重新输入！'
        }
      }
  // 获取对象
      let username = document.querySelector(".username");
      let phone = document.querySelector(".phone");
      let email = document.querySelector(".email");
      let password = document.querySelector(".password");
      let nextpassword = document.querySelector(".nextpassword");
   // 给用户名框设置失去焦点函数  
    username.onblur = function(){
        let span1 = document.querySelector('.username1');
        let s1 = usernameCheck();
        if(s1 == '输入格式正确!'){
          span1.style.color = 'green'
        }else{
          span1.style.color = 'red'
        }
        span1.innerHTML = s1
       }
   // 给手机号框设置失去焦点函数
      phone.onblur = function(){
        let span2 = document.querySelector('.phone1');
        let s2 = phoneCheck();
        if(s2 == '输入格式正确!'){
          span2.style.color = 'green'
        }else{
          span2.style.color = 'red'
        }
        span2.innerHTML = s2
    }
// 给邮箱框设置失去焦点函数
    email.onblur = function(){
        let span3 = document.querySelector('.email1');
        let s3 = emailCheck();
        if(s3 == '输入格式正确!'){
          span3.style.color = 'green'
        }else{
          span3.style.color = 'red'
        }
        span3.innerHTML = s3
    }
// 给密码框设置失去焦点函数
    password.onblur = function(){
        let span4 = document.querySelector('.password1');
        let s4 = passwordCheck();
        if(s4 == '输入格式正确!'){
          span4.style.color = 'green'
        }else{
          span4.style.color = 'red'
        }
        span4.innerHTML = s4
    }
// 给确认密码框设置失去焦点函数
    nextpassword.onblur = function(){
      let span5 = document.querySelector('.nextpassword1');
      let s5 = nextpasswordCheck();
        if(s5 == '输入正确!'){
          span5.style.color = 'green'
        }else{
          span5.style.color = 'red'
        }
        span5.innerHTML = s5
    }
// 设置点击注册按钮后的提交函数（必填信息填写完成后才能跳转页面）
    function tijiao(){
      if(usernameCheck() !== '用户名不能为空！' && phoneCheck() !== '手机号不能为空！' && emailCheck() !== '邮箱不能为空！' && passwordCheck() !== '密码不能为空！' && nextpasswordCheck() !== '两次输入不同，请重新输入！'){
          return true
      }else{
        alert('请输入相关信息后再注册！')
        return false
      }
    }
// 给密码框的遮挡图片添加点击事件，实现密码的显示
    let tu = document.querySelector('.tu');
    tu.onclick = function(){
      if(password.type === 'password'){
        password.type = 'text'
      }else{
        password.type = 'password'
      }
    }
    let tu1 = document.querySelector('.tu1');
    tu1.onclick = function(){
      if(nextpassword.type === 'password'){
        nextpassword.type = 'text'
      }else{
        nextpassword.type = 'password'
      }
    }
</script>
</body>
</html>

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background: url("../image/1.jpg");
    background-size: cover;
}
.box{
  width:500px;
  margin:30px auto;
}
.box h1{
    text-align: center;
}
.box p{
    font-size: 20px;
    font-weight: 500;
}
.input_box{
    width:30rem;
    height: 1.7rem;
}
.cm{
    margin-top:30px;
}
.zc{
    width:98px;
    height:40px;
    background-color: aquamarine;
    border:2px solid black;
    margin-top:30px;
}

span{
    font-size: 15px;
}
.mima{
    position: relative;
}
.tu,.tu1{
    position: absolute;
    top:47px;
    right:24px;
    width: 30px;
    height: 30px; 
}

The page code success.html after the jump

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            color:rgb(223, 63, 229);
        }
    </style>
</head>
<body>
    <h1>太棒了，恭喜你~~~~~</h1>
    <h1><b></b>：<span></span>&nbsp;&nbsp;注册成功！</h1>
    <script>
      function getValue(param) {
      const exp = new RegExp('(^|&)' + param + '=([^&]*)(&|$)', 'i');
      const outcome = window.location.search.substr(1).match(exp);
      if (outcome != null) {
        return decodeURI(outcome[2]);
      }else{
        return null;
      }
      }
     let span = document.querySelector('span');
     let b = document.querySelector('b');
     span.innerHTML = getValue('username');
     b.innerHTML = getValue('object');
    </script>
</body>
</html>

The password box blocks the picture:

Block image source: iconfont-Alibaba vector icon library

Source of background image: http://www.netbian.com/dongtai/index.htm

Precautions:

After obtaining the corresponding input object, the corresponding value cannot be output with console.log(object.value), because no content has been entered in the input box at this time. You can add the onblur function to the object and then output it.

Regular expression definitions cannot be quoted. If you add quotation marks, const bds4 = ' /^\w{6,12}$/ ' will report an error. test is not function

js realizes the input verification and data acquisition of the registration page

Guess you like