js realiza a verificação de entrada e aquisição de dados da página de registro

Language 2023-06-25 15:52:56 views: null

página de registro inicial

Efeito de verificação (preencha a informação é escrita casualmente)

O efeito do formato correto (as informações são preenchidas casualmente)

Efeito após clicar no botão registrar

código mostra como abaixo:

  • código da página de registro

<!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>

  • registrar.css

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; 
}

  • O código da página success.html após o salto

<!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>

A caixa de senha bloqueia a imagem:

Fonte da imagem do bloco: iconfont-Alibaba vector icon library

Fonte da imagem de fundo: http://www.netbian.com/dongtai/index.htm

Precauções:

  1. Depois de obter o objeto de entrada correspondente, o valor correspondente não pode ser gerado com console.log(object.value), porque nenhum conteúdo foi inserido na caixa de entrada neste momento. Você pode adicionar a função onblur ao objeto e, em seguida, produzi-lo.

  1. As definições de expressões regulares não podem ser citadas. Se você adicionar aspas, const bds4 = ' /^\w{6,12}$/ ' irá reportar um erro. test is not function

Acho que você gosta

Origin blog.csdn.net/weixin_53141315/article/details/129487786
Recomendado
Clasificación
Diario
Más
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)

Code World

© 2018 codetd.com