• 登录/注册

    目录

     1.HTML

    2.CSS

     3.JS

    4.资源

    5.运行结果

     6.下载链接

    7.注意事项 

     1.HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>注册title>
    7.     <link rel="stylesheet" href="../css/register.css">
    8. head>
    9. <body>
    10.     <div class="register">
    11.         <div class="cont">
    12.             <ul class="list">
    13.                 <li>
    14.                     <span>用户名span>
    15.                     <input type="text" class="userName">
    16.                     <img src="../image/sure.png" alt="必填">
    17.                 li>
    18.                 <li>
    19.                     <span>Emailspan>
    20.                     <input type="email" class="email">
    21.                     <img src="../image/sure.png" alt="必填">
    22.                 li>
    23.                 <li>
    24.                     <span>密码span>
    25.                     <input type="password" class="password">
    26.                     <img src="../image/sure.png" alt="必填">
    27.                 li>
    28.                 <li class="qiang">
    29.                     <span>密码强度span>
    30.                     <p>
    31.                         <span class="weak">弱span>
    32.                         <span class="medium">中span>
    33.                         <span class="strong">强span>
    34.                     p>
    35.                 li>
    36.                 <li>
    37.                     <span>确认密码span>
    38.                     <input type="password" class="passwordTrue">
    39.                     <img src="../image/sure.png" alt="必填">
    40.                 li>
    41.                 <li>
    42.                     <span>MSNspan>
    43.                     <input type="text" class="msn">
    44.                 li>
    45.                 <li>
    46.                     <span>QQspan>
    47.                     <input type="text" class="qq">
    48.                 li>
    49.                 <li>
    50.                     <span>办公电话span>
    51.                     <input type="text" class="tel">
    52.                 li>
    53.                 <li>
    54.                     <span>家庭电话span>
    55.                     <input type="text" class="phone">
    56.                 li>
    57.                 <li>
    58.                     <span>手机span>
    59.                     <input type="text" class="mobile">
    60.                 li>
    61.                 <li class="yan">
    62.                     <span>验证码span>
    63.                     <input type="text">
    64.                     <p class="yanMa">J6EPp>
    65.                 li>
    66.                 <li>
    67.                     <span>span>
    68.                     <input type="checkbox" class="agree">
    69.                     <p>我已看过并接受《<a href="##">用户协议a>》p>
    70.                 li>
    71.                 <li>
    72.                     <span>span>
    73.                     <button class="btn">立即注册button>
    74.                 li>
    75.             ul>
    76.         div>
    77.     div>
    78. body>
    79. html>
    80. <script src="../js/register.js">script>

    2.CSS

    1. *{margin: 0;padding: 0;}
    2. ul,li,ol{list-style-type: none;}
    3. button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
    4. .register{
    5.     width: 100%;
    6.     height: 100vh;
    7.     display: flex;
    8.     justify-content: center;
    9.     align-items: center;
    10. }
    11. .cont{
    12.     width: 320px;
    13.     height: 450px;
    14.     background: #fbfbfb;
    15.     display: flex;
    16.     flex-direction: column;
    17.     justify-content: center;
    18.     align-items: center;
    19. }
    20. .list{
    21.     width: 270px;
    22. }
    23. .list li{
    24.     width: 100%;
    25.     height: 20px;
    26.     display: flex;
    27.     align-items: center;
    28.     margin-bottom: 10px;
    29.     font-size: 12px;
    30. }
    31. .list li span{
    32.     width: 60px;
    33.     height: 100%;
    34.     line-height: 20px;
    35.     text-align: right;
    36.     margin-right: 10px;
    37. }
    38. .list li input{
    39.     /* width: 180px; */
    40.     height: 100%;
    41.     border: 1px #ccc solid;
    42. }
    43. .list li img{
    44.     width: 10px;
    45.     height: 10px;
    46.     margin-left: 10px;
    47. }
    48. .list li p{
    49.     margin-left: 10px;
    50. }
    51. .list .qiang p{
    52.     width: 120px;
    53.     display: flex;
    54.     align-items: center;
    55.     justify-content: space-around;
    56. }
    57. .list .yan input{
    58.     width: 80px;
    59. }
    60. .list .yan p{
    61.     width: 80px;
    62.     height: 100%;
    63.     line-height: 20px;
    64.     text-align: center;
    65.     border: 1px #ccc solid;
    66.     background: url(../image/yan.png) no-repeat 0 0/100% 100%;
    67.     color: #fff;
    68. }
    69. .btn{
    70.     width: 100px;
    71.     height: 40px;
    72.     background: #4da4d2;
    73.     color: #fff;
    74.     margin-top: 10px;
    75.     border-radius: 5px;
    76. }
    77. .yanMa{
    78.     cursor: pointer;
    79. }

     3.JS

    1. let btn = document.querySelector('.btn');
    2.     let userName = document.querySelector('.userName');
    3.     let email = document.querySelector('.email');
    4.     let password = document.querySelector('.password');
    5.     let passwordTrue = document.querySelector('.passwordTrue');
    6.     let msn = document.querySelector('.msn');
    7.     let qq = document.querySelector('.qq');
    8.     let tel = document.querySelector('.tel');
    9.     let phone = document.querySelector('.phone');
    10.     let mobile = document.querySelector('.mobile');
    11.     let yan = document.querySelector('.yan input');
    12.     let yanMa = document.querySelector('.yanMa');
    13.     let agree = document.querySelector('.agree');
    14.     let weak = document.querySelector('.weak');
    15.     let medium = document.querySelector('.medium');
    16.     let strong = document.querySelector('.strong');
    17.  
    18.     // 密码强度
    19.     function checkPasswordStrength(password) {
    20.         if(password.length<5){
    21.             alert('最少输入6位密码');
    22.         }else if(password.length>25){
    23.             alert('最多输入26位密码');
    24.         }else{
    25.             let code=0;
    26.             const hasNumber = /\d/;  // 包含数字
    27.             const hasLetter = /[a-zA-Z]/;  // 包含字母
    28.             const hasSymbol = /[!@#$%^&*(),.?":{}|<>]/;  // 包含特殊字符
    29.  
    30.             if (hasNumber.test(password)) code++;
    31.             if (hasLetter.test(password)) code++;
    32.             if (hasSymbol.test(password)) code++;
    33.  
    34.             // 检查密码强度
    35.             if (code==1) {
    36.                 weak.style.color='#f00';
    37.                 medium.style.color = '#000';
    38.                 strong.style.color = '#000';
    39.             } else if (code==2) {
    40.                 weak.style.color='#000';
    41.                 medium.style.color = '#f00';
    42.                 strong.style.color = '#000';
    43.             } else if (code==3) {
    44.                 weak.style.color='#000';
    45.                 medium.style.color = '#000';
    46.                 strong.style.color = '#f00';
    47.             } else {
    48.                 weak.style.color='#000';
    49.                 medium.style.color = '#000';
    50.                 strong.style.color = '#000';
    51.             }
    52.         }
    53.     };
    54.     // 失焦判断密码强度
    55.     password.onblur=function(){
    56.         checkPasswordStrength(password.value);  
    57.     }
    58.     // 验证码
    59.     function yanZheng(){
    60.         // 包含所有可能的字符
    61.         const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
    62.         // 生成四位验证码
    63.         let verificationCode = '';
    64.         for (let i = 0; i < 4; i++) {
    65.             const randomIndex = Math.floor(Math.random() * characters.length);
    66.             verificationCode += characters.charAt(randomIndex);
    67.         }
    68.         yanMa.innerHTML=verificationCode.toUpperCase();
    69.     };
    70.     yanZheng();
    71.     // 点击验证码刷新验证码
    72.     yanMa.onclick=function(){
    73.         yanZheng();   
    74.     };
    75.  
    76.     // 点击注册按钮
    77.     btn.onclick=function(){
    78.         let yanEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    79.         let yanTel = /^1[3-9]\d{9}$/;
    80.         let dataObj={
    81.             userName:userName.value,
    82.             email:email.value,
    83.             password:password.value,
    84.             msn:msn.value,
    85.             qq:qq.value,
    86.             tel:tel.value,
    87.             phone:phone.value,
    88.             mobile:mobile.value,
    89.         };
    90.         yan.value=yan.value.toUpperCase();
    91.         if(userName.value==''){
    92.             alert('请输入用户名');
    93.         }else if(email.value==''){
    94.             alert('请输入Email');
    95.         }else if(!yanEmail.test(email.value)){
    96.             alert('请输入正确的Email');
    97.         }else if(password.value==''){
    98.             alert('请输入密码');
    99.         }else if(passwordTrue.value==''){
    100.             alert('请确认密码');
    101.         }
    102.         else if(password.value!=passwordTrue.value){
    103.             alert('两次密码输入不一致，请重新输入。')
    104.         }else if(yan.value==''||yan.value!=yanMa.innerHTML){
    105.             console.log(yan.value,yanMa.innerHTML);
    106.             if(confirm('验证码输入不正确，请重新输入')){
    107.                 yanZheng();
    108.             }else{
    109.                 yanZheng();
    110.             }
    111.         }else if(!agree.checked){
    112.             if(confirm('请同意用户协议')){
    113.                 agree.checked=!agree.checked;
    114.             }else{
    115.                 
    116.             }
    117.         }
    118.         else{
    119.             fetch('http://localhost:8080/api/register',{
    120.                 method: 'POST',
    121.                 headers: {
    122.                 'Content-Type': 'application/json', // 设置请求头的 Content-Type
    123.                 },
    124.                 body: JSON.stringify(dataObj)
    125.             }).then(response => response.json()).then(data => {
    126.                 console.log(data);
    127.                 if(data.code==200){
    128.                     alert('注册成功');
    129.                 }
    130.             }).catch(error => {
    131.                 console.error('Error:', error);
    132.             });
    133.         }
    134.     };

    4.资源

    5.运行结果

     6.下载链接

    在此下载压缩包

    【免费】登录、注册的建议通用模板资源-CSDN文库

    7.注意事项 

    此压缩包 包含前后端简单交互，后端需要用到Node.js，运行口令 nodemon app.js 

    或者在serve文件夹直接运行run.bat文件，运行成功后打开html即可。注意：run.bat运行成功后不要退出cmd。

  • 相关阅读:
    jmeter跨平台运行csv等文件
    播放器缓存队列bug解决方案
    Ubuntu - 查看系统信息
    js中onchange的使用场景及如何使用
    多线程_synchronized锁与Lock锁
    MySQL锁机制&事务
    17-Spring AOP源码分析-AnnotationAwareAspectJAutoProxyCreator
    网络连通性测试
    golang学习笔记（defer基础知识）
    助力森林火情预警检测，基于YOLOv7-tiny、YOLOv7和YOLOv7x开发构建无人机航拍场景下的森林火情检测是别预警系统
  • 原文地址：https://blog.csdn.net/jxl20010909/article/details/140382001