m0_46602893 2021-10-06 18:32 采纳率: 91.5%
浏览 25
已结题

JS关于表单验证的CSS问题?


<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #div{width: 250px;height: 250px;border: 1px solid black;margin:100px auto;text-align: center;padding: 50px;background-color: antiquewhite;}
            #div input{width: 250px;height: 30px;margin-top: 20px;font-size: 18px;}
            #div span{margin-top: 5px;color: red;font-size: 12px;}
            #div div{width: 50px;height: 25px;border: 1px black solid;background-color: gray;float:left;margin-left: 25px;
            }
      </style>
      <script>
            window.onload = function(){
                  var Div = document.getElementById("div");
                  var Username = document.getElementById("username");
                  var Usernamespan = document.getElementById("username_span");
                  var Password = document.getElementById("password");
                  var divs = Div.getElementsByTagName("div");
                  var span = document.getElementById("span");
                  
                  //需要添加一个失去焦点事件
                  Username.onblur = function(){
                        // 如果长度不在范围内,则提示
                        if(Username.value.length > 18 || Username.value.length < 6 && Username.value.length != 0){
                              Usernamespan.innerHTML = "!必须输入长度是6到18的字符";
                        }//如果首位不是字母开头,则提示
                        else if(Username.value.length == 0){
                              Usernamespan.innerHTML = "6—18个字符,可以使用数字字母下划线, 首位必须是字母开头";

                        }
                        else if(!/[a-zA-Z]/.test(Username.value[0])){
                              Usernamespan.innerHTML = "首位必须是以字母开始!!!";
                        }//看里面输入的内容是不是都是以数字字母下划线组成,如果有非数字字母下划线的,提示
                        else if(/\W/.test(Username.value)){
                              Usernamespan.innerHTML = "里面的内容必须是数字字母下划线组成!!!";
                        }else{
                              Usernamespan.innerHTML = "恭喜你,这个账号可以使用";
                        }
                  }



                  //需要对密码强弱进行判断,
                  //纯数字 纯大小写:弱    数字字母下划线两两混合:中    三中都有:强
                        Password.onkeyup = function(){

                              for(var i = 0; i < divs.length; i++){
                              divs[i].style.backgroundColor = "gray";
                              }
                            if(Password.value.length >= 6 && Password.value.length  <= 18){  
                              span.innerHTML = "恭喜你,该密码可以使用!";

                              if(/^[0-9]+$/.test(Password.value) || /^[A-Z]+$/.test(Password.value) || 
                              /^[a-z]+$/.test(Password.value)){
                                    divs[0].style.backgroundColor = "red";
                              }else if(/\d/.test(Password.value) && /[a-z]/.test(Password.value) && /[A-Z]/.test(Password.value)
                              ){
                                    divs[2].style.backgroundColor = "red";
                              }else{
                                    divs[1].style.backgroundColor = "red";
                              }
                        }else if(Password.value.length == 0){
                              span.innerHTML = "请输入密码";
                        }else{
                              span.innerHTML = "您输入的密码未达到标准";

                        }
                  }


                 
            }
            



      </script>
</head>
<body>
      <div id="div">
            <input id="username" type="text" placeholder="用户名"/>
            <span id="username_span">6—18个字符,可以使用数字字母下划线, 首位必须是字母开头</span>
            <input id="password" type="text" placeholder="密码"/>
            <div></div>
            <div></div>
            <div></div>
            <span id="span" style="font-size: 12px;">请输入密码</span>
      </div>
</body>
</html>

img


上面这段代码中我最下面的span如果想要让span的fontsize不变的同时还要让span的问题处于最下面横排显示应该怎么办?

  • 写回答

1条回答 默认 最新

  • 本堃不方 2021-10-06 20:14
    关注

    加俩br,造成这样的原因是用了浮动,而你没有清除浮动,js代码一般放在下面,现在是没问题,以后你就就会因为这个错误头秃的,可以百度一下为什么

    <!DOCTYPE html>
    <html lang="en">
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
                #div{width: 250px;height: 250px;border: 1px solid black;margin:100px auto;text-align: center;padding: 50px;background-color: antiquewhite;}
                #div input{width: 250px;height: 30px;margin-top: 20px;font-size: 18px;}
                #div span{margin-top: 5px;color: red;font-size: 12px;}
                #div div{width: 50px;height: 25px;border: 1px black solid;background-color: gray;float:left;margin-left: 25px;
                }
          </style>
    </head>
    <body>
          <div id="div">
                <input id="username" type="text" placeholder="用户名"/>
                <span id="username_span">6—18个字符,可以使用数字字母下划线, 首位必须是字母开头</span>
                <input id="password" type="text" placeholder="密码"/>
                <div></div>
                <div></div>
                <div></div>
                <br>
                <br>
                <span id="span" style="font-size: 12px;">请输入密码</span>
          </div>
          <script>
            window.onload = function(){
                  var Div = document.getElementById("div");
                  var Username = document.getElementById("username");
                  var Usernamespan = document.getElementById("username_span");
                  var Password = document.getElementById("password");
                  var divs = Div.getElementsByTagName("div");
                  var span = document.getElementById("span");
                  //需要添加一个失去焦点事件
                  Username.onblur = function(){
                        // 如果长度不在范围内,则提示
                        if(Username.value.length > 18 || Username.value.length < 6 && Username.value.length != 0){
                              Usernamespan.innerHTML = "!必须输入长度是6到18的字符";
                        }//如果首位不是字母开头,则提示
                        else if(Username.value.length == 0){
                              Usernamespan.innerHTML = "6—18个字符,可以使用数字字母下划线, 首位必须是字母开头";
                        }
                        else if(!/[a-zA-Z]/.test(Username.value[0])){
                              Usernamespan.innerHTML = "首位必须是以字母开始!!!";
                        }//看里面输入的内容是不是都是以数字字母下划线组成,如果有非数字字母下划线的,提示
                        else if(/\W/.test(Username.value)){
                              Usernamespan.innerHTML = "里面的内容必须是数字字母下划线组成!!!";
                        }else{
                              Usernamespan.innerHTML = "恭喜你,这个账号可以使用";
                        }
                  }
    
                  //需要对密码强弱进行判断,
                  //纯数字 纯大小写:弱    数字字母下划线两两混合:中    三中都有:强
                        Password.onkeyup = function(){
                              for(var i = 0; i < divs.length; i++){
                              divs[i].style.backgroundColor = "gray";
                              }
                            if(Password.value.length >= 6 && Password.value.length  <= 18){  
                              span.innerHTML = "恭喜你,该密码可以使用!";
                              if(/^[0-9]+$/.test(Password.value) || /^[A-Z]+$/.test(Password.value) || 
                              /^[a-z]+$/.test(Password.value)){
                                    divs[0].style.backgroundColor = "red";
                              }else if(/\d/.test(Password.value) && /[a-z]/.test(Password.value) && /[A-Z]/.test(Password.value)
                              ){
                                    divs[2].style.backgroundColor = "red";
                              }else{
                                    divs[1].style.backgroundColor = "red";
                              }
                        }else if(Password.value.length == 0){
                              span.innerHTML = "请输入密码";
                        }else{
                              span.innerHTML = "您输入的密码未达到标准";
                        }
                  }
    
            }
      </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月15日
  • 已采纳回答 10月7日
  • 创建了问题 10月6日

悬赏问题

  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题
  • ¥15 微信开发者工具vant组件
  • ¥15 iPhone iCloud云盘资料删除,MAC丢失50多G桌面资料
  • ¥20 希望各位学长可以给我答疑