JQuery密码验证长度不读？

时间：2016-11-16 04:00:05

标签： javascript jquery html css3

下面我有弱，强，非常强。我试图改变这些跨度的颜色取决于输入值（密码）的长度。我似乎无法弄清楚为什么我的设置正在工作。我的目标错了吗？另一个问题是当我键入其他输入的背景颜色应该从红色变为无颜色，因为我做了如果有任何值，删除红色，这也不起作用：（

＆＃13;
＆＃13; 
$(document).ready(function(){
    
    var pa= $("#passid").val();
    var cp= $("#confirmpass").val();

    var x = $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").val();
    
    
    if( x== null || x== "")
	{
		
        $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
          return true;
		
    }
    
    else {
        
        $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeClass("bordercoloron");
        
        return true;
    }
    
	
    if(pa.length<=5){

        $("#passstrength span").eq(0).css("color","red");
    }

    if(pa.length>5 && pa.length<=7 ){

        $("#passstrength span").eq(1).css("color","yellow");
    }

    if(pa.length>7 ){

        $("#passstrength span").eq(2).css("color","green");
    }


})

 function redirect(){
      
        window.location.href = "output.html";
        
    }
＆＃13; 
#wraper{
margin: 0 auto;
height: 4000px;
width:1000px;
border: 2px solid black;

}
#wholeform{
	
	margin: 0 auto;
	height: 700px;
	width: 400px;
	border: 2px solid grey;
}

#fnameid,#Lnameid{
	
	height: 50px;
	width: 172px;
	border:none;
	position: relative;
	left: 0.5%;
	margin-top:3%;
	padding-left: 5%;
	font-size: 20px;
	
}
#emailid,#phoneid{
	height: 50px;
	width: 372px;
	border:none;
	position: relative;
    left: 0.5%;
	font-size: 20px;
	padding-left: 5%;
	letter-spacing: 9px;
	margin-top:5%;
	
}

#dob-day,#dob-month,#dob-year
{
	height: 50px;
	width: 120px;
	position: relative;
	left: 4%;
	border:none;
	font-size: 20px;
	margin-top:5%;
	color:darkgray
	
}
#mf{
	height: 55px;
	width: 350px;
	position: relative;
	left: 4%;
	border:none;
	font-size: 50px;
	margin-top:-2%;
	padding-left: 5%;
	letter-spacing: 10px;
	color:darkgray
	
	
	
}

.bordercoloron{
	
	background-color: coral;
}

.bordercoloroff{
	
	border: none;
}

#passid{
	height: 50px;
	width: 172px;
	border:none;
	position: absolute;
	left: 37.5%;
	margin-top:15%;
	padding-left: 1%;
	font-size: 20px;
	
}


#confirmid{
	
	height: 50px;
	width: 165px;
	border:none;
	position: absolute;
	left: 50.5%;
	margin-top:15%;
	padding-left: 1%;
	font-size: 20px;
	
}

#passstrength{
	text-align: center;
	color: grey;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
	<title></title>
    <link rel="stylesheet" type="text/css" href="../css/jexerinter.css">
</head>
	
<body>

   <div id="wrap">
	
	<div id="mainbox">
	   
	  <form  id="wholeform">
	   <input type="text" placeholder="FirstName" name="fname" id="fnameid">
	   <input type="text" placeholder="LastName" name="Lname" id="Lnameid">	
	   <input type="text" placeholder="Email@example.com" name="email" id="emailid">
	   <input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid">
		  

     <select name="dob-day" id="dob-day"> 
       <option value="">Day</option> 
       <option value="">---</option> 
       <option value="01">01</option> 
       <option value="02">02</option> 
       <option value="03">03</option> 
       <option value="04">04</option> 
       <option value="05">05</option> 
       <option value="06">06</option> 
       <option value="07">07</option> 
       <option value="08">08</option> 
       <option value="09">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
       <option value="16">16</option> 
       <option value="17">17</option> 
       <option value="18">18</option> 
       <option value="19">19</option> 
       <option value="20">20</option> 
       <option value="21">21</option> 
       <option value="22">22</option> 
       <option value="23">23</option> 
       <option value="24">24</option> 
       <option value="25">25</option> 
       <option value="26">26</option> 
       <option value="27">27</option> 
       <option value="28">28</option> 
       <option value="29">29</option> 
       <option value="30">30</option> 
       <option value="31">31</option> 
     </select> 
     <select name="dob-month" id="dob-month"> 
       <option value="">Month</option> 
       <option value="">-----</option> 
       <option value="01">January</option> 
       <option value="02">February</option> 
       <option value="03">March</option> 
       <option value="04">April</option> 
       <option value="05">May</option> 
       <option value="06">June</option> 
       <option value="07">July</option> 
       <option value="08">August</option> 
       <option value="09">September</option> 
       <option value="10">October</option> 
       <option value="11">November</option> 
       <option value="12">December</option> 
     </select> 
     <select name="dob-year" id="dob-year"> 
       <option value="">Year</option> 
       <option value="">----</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       
     </select> 
   
	   <h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3>	  
	   <select id="mf">
		  <option>Male</option>
		  <option>Female</option>
	   </select>
    
    
   
		 <input type="button" id="submit" style="background-color:#2196F3;border-radius:5px;border:2px #2196F3;position:relative; margin-top:25%;left:25%;width:200px;height:80px;font-size:50px;color:darkgray; padding-left:5%;" value="SignUp" onclick="redirect()">
		  
		  
		  <input type="text" placeholder="Password" name="Pass" id="passid" >
		  
	   <input type="text" placeholder="Confirm Password" name="confirmpass" id="confirmid">
		  
		<p id="passstrength"><span>Weak  </span> <span>Strong  </span><span>Very strong</span></p>
	  </form>   
	  
	
	   
	   
	</div>
	

	
	</div>
	
 
<script src="../js/jexercise.js"></script>    
   
</body>
	
	
	
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您需要在代码中修复以下内容，

if(pa.val().length<=5){
    $("#passstrength span").eq(0).css("color","red");
}

＆＃34; PA＆＃34;已经是一个值

var pa= $("#passid").val();

应该是，

 if(pa.length<=5){
    $("#passstrength span").eq(0).css("color","red");
 }

编辑2：你需要修改你的流程。即使在流程进行验证和更改颜色之前，您也会返回。您还需要在密码字段上执行onchange事件，它将根据长度更改颜色，如下所示，在当前代码中，它是在ready（）上完成的，这是不正确的增量/动态验证。

这样做。

＆＃13;
＆＃13; 
$(document).ready(function(){

 $("#passid").change(function(){

    var pa= $(this).val();
    var cp= $("#confirmpass").val();

    if(pa.length<=5){
       
      $("span#weak").css("color","red");
    }

    if(pa.length>5 && pa.length<=7 ){
       $("span#strong").css("color","yellow");
    }

    if(pa.length>7 ){
      $("span#vstrong").css("color","green");
    }

});

    var x = $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").val();

    if( x== null || x== "")
    {
       $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
      
    }

    else {

       $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeClass("bordercoloron");

      return true;
    }
  });

 function redirect(){
     window.location.href = "output.html";
 }
＆＃13; 
#wraper{
margin: 0 auto;
height: 4000px;
width:1000px;
border: 2px solid black;

}
#wholeform{
	
	margin: 0 auto;
	height: 700px;
	width: 400px;
	border: 2px solid grey;
}

#fnameid,#Lnameid{
	
	height: 50px;
	width: 172px;
	border:none;
	position: relative;
	left: 0.5%;
	margin-top:3%;
	padding-left: 5%;
	font-size: 20px;
	
}
#emailid,#phoneid{
	height: 50px;
	width: 372px;
	border:none;
	position: relative;
    left: 0.5%;
	font-size: 20px;
	padding-left: 5%;
	letter-spacing: 9px;
	margin-top:5%;
	
}

#dob-day,#dob-month,#dob-year
{
	height: 50px;
	width: 120px;
	position: relative;
	left: 4%;
	border:none;
	font-size: 20px;
	margin-top:5%;
	color:darkgray
	
}
#mf{
	height: 55px;
	width: 350px;
	position: relative;
	left: 4%;
	border:none;
	font-size: 50px;
	margin-top:-2%;
	padding-left: 5%;
	letter-spacing: 10px;
	color:darkgray
	
	
	
}

.bordercoloron{
	
	background-color: coral;
}

.bordercoloroff{
	
	border: none;
}

#passid{
	height: 50px;
	width: 172px;
	border:none;
	position: absolute;
	left: 37.5%;
	margin-top:15%;
	padding-left: 1%;
	font-size: 20px;
	
}


#confirmid{
	
	height: 50px;
	width: 165px;
	border:none;
	position: absolute;
	left: 50.5%;
	margin-top:15%;
	padding-left: 1%;
	font-size: 20px;
	
}

#passstrength{
	text-align: center;
	color: grey;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
	
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
	<title></title>
    <link rel="stylesheet" type="text/css" href="../css/jexerinter.css">
</head>
	
<body>

   <div id="wrap">
	
	<div id="mainbox">
	   
	  <form  id="wholeform">
	   <input type="text" placeholder="FirstName" name="fname" id="fnameid">
	   <input type="text" placeholder="LastName" name="Lname" id="Lnameid">	
	   <input type="text" placeholder="Email@example.com" name="email" id="emailid">
	   <input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid">
		  

     <select name="dob-day" id="dob-day"> 
       <option value="">Day</option> 
       <option value="">---</option> 
       <option value="01">01</option> 
       <option value="02">02</option> 
       <option value="03">03</option> 
       <option value="04">04</option> 
       <option value="05">05</option> 
       <option value="06">06</option> 
       <option value="07">07</option> 
       <option value="08">08</option> 
       <option value="09">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
       <option value="16">16</option> 
       <option value="17">17</option> 
       <option value="18">18</option> 
       <option value="19">19</option> 
       <option value="20">20</option> 
       <option value="21">21</option> 
       <option value="22">22</option> 
       <option value="23">23</option> 
       <option value="24">24</option> 
       <option value="25">25</option> 
       <option value="26">26</option> 
       <option value="27">27</option> 
       <option value="28">28</option> 
       <option value="29">29</option> 
       <option value="30">30</option> 
       <option value="31">31</option> 
     </select> 
     <select name="dob-month" id="dob-month"> 
       <option value="">Month</option> 
       <option value="">-----</option> 
       <option value="01">January</option> 
       <option value="02">February</option> 
       <option value="03">March</option> 
       <option value="04">April</option> 
       <option value="05">May</option> 
       <option value="06">June</option> 
       <option value="07">July</option> 
       <option value="08">August</option> 
       <option value="09">September</option> 
       <option value="10">October</option> 
       <option value="11">November</option> 
       <option value="12">December</option> 
     </select> 
     <select name="dob-year" id="dob-year"> 
       <option value="">Year</option> 
       <option value="">----</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       
     </select> 
   
	   <h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3>	  
	   <select id="mf">
		  <option>Male</option>
		  <option>Female</option>
	   </select>
    
    
   
		 <input type="button" id="submit" style="background-color:#2196F3;border-radius:5px;border:2px #2196F3;position:relative; margin-top:25%;left:25%;width:200px;height:80px;font-size:50px;color:darkgray; padding-left:5%;" value="SignUp" onclick="redirect()">
		  
		  
		  <input type="text" placeholder="Password" name="Pass" id="passid" /><br/>
        <input type="text" placeholder="Confirm Password" name="confirmpass" id="confirmid" />	<br/>	  
		<span id="weak">Weak</span> 
        <span id="strong">Strong  </span>
        <span id="vstrong">Very strong</span>
	  </form>     
	   
	</div>
	</div>   
   
</body>
	
	
	
</html>
＆＃13;
＆＃13;
＆＃13;

小提琴链接

http://jsfiddle.net/9cGxs/

答案 1 :(得分：0)

这是因为你的if / else条件在你的长度检查之前执行

if( x== null || x== "")
{

    $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
      return true;

}

else {

    $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeClass("bordercoloron");

    return true;
}

删除其他条件或在

之前执行长度检查代码

答案 2 :(得分：0)

您必须从＆＃39; if＆＃39;中删除退货声明。子句。

否则，您的代码将在执行其余代码之前返回：

if( x== null || x== "")
{   
    $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");   
}

else {      
    $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeClass("bordercoloron");
}

答案 3 :(得分：-1)

将if(pa.val().length<=5)更改为if(pa.length<=5)

修改 

$("#passid").bind('input', function() { 
     var pa=  $(this).val();
      if(pa.length<=5){
         $("#passstrength").html("<span style='color:red'>Weak</span>");
      }
      else if(pa.length>5 && pa.length<=7 ){
         $("#passstrength").html("<span style='color:yellow'>Strong</span>");
      }else{
         $("#passstrength").html("<span style='color:green'>Very Strong</span>");
      }
});
相关问题
最新问题