JQuery Проверка пароля с длиной, не читаемой?

ниже у меня диапазон слабый, сильный, очень сильный. Я пытаюсь изменить цвет этих интервалов, зависит от длины входного значения (пароля). я не могу понять, почему моя настройка работает. Я не нацелился на нее неправильно? Другой вопрос, когда я печатаю цвет фона другого входа должен меняться от красного до цвета не так я сделал, если есть какое-либо значение, удалить красный цвет, это не работает, либо :(JQuery Проверка пароля с длиной, не читаемой?

$(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== "") 
 
\t { 
 
\t \t 
 
     $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron"); 
 
      return true; 
 
\t \t 
 
    } 
 
    
 
    else { 
 
     
 
     $("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeClass("bordercoloron"); 
 
     
 
     return true; 
 
    } 
 
    
 
\t 
 
    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"; 
 
     
 
    }

#wraper{ 
 
margin: 0 auto; 
 
height: 4000px; 
 
width:1000px; 
 
border: 2px solid black; 
 

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

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

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

 
.bordercoloron{ 
 
\t 
 
\t background-color: coral; 
 
} 
 

 
.bordercoloroff{ 
 
\t 
 
\t border: none; 
 
} 
 

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

 

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

 
#passstrength{ 
 
\t text-align: center; 
 
\t color: grey; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    
 
\t <title></title> 
 
    <link rel="stylesheet" type="text/css" href="../css/jexerinter.css"> 
 
</head> 
 
\t 
 
<body> 
 

 
    <div id="wrap"> 
 
\t 
 
\t <div id="mainbox"> 
 
\t  
 
\t <form id="wholeform"> 
 
\t <input type="text" placeholder="FirstName" name="fname" id="fnameid"> 
 
\t <input type="text" placeholder="LastName" name="Lname" id="Lnameid"> \t 
 
\t <input type="text" placeholder="[email protected]" name="email" id="emailid"> 
 
\t <input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid"> 
 
\t \t 
 

 
    <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> 
 
    
 
\t <h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3> \t 
 
\t <select id="mf"> 
 
\t \t <option>Male</option> 
 
\t \t <option>Female</option> 
 
\t </select> 
 
    
 
    
 
    
 
\t \t <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()"> 
 
\t \t 
 
\t \t 
 
\t \t <input type="text" placeholder="Password" name="Pass" id="passid" > 
 
\t \t 
 
\t <input type="text" placeholder="Confirm Password" name="confirmpass" id="confirmid"> 
 
\t \t 
 
\t \t <p id="passstrength"><span>Weak </span> <span>Strong </span><span>Very strong</span></p> 
 
\t </form> 
 
\t 
 
\t 
 
\t  
 
\t  
 
\t </div> 
 
\t 
 

 
\t 
 
\t </div> 
 
\t 
 
    
 
<script src="../js/jexercise.js"></script>  
 
    
 
</body> 
 
\t 
 
\t 
 
\t 
 
</html>

источник

2016-11-16 Anu Rajan

'pa' это значение напечатал пароль, в' если (pa.val() длина <= 5.) { ' удалите '.val()'. – Tushar

tho это была опечатка, даже после удаления, все еще не меняя цвет span tho :( –

Вам необходимо исправить следующее в вашем коде,

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

"па" уже значение

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

Должно быть,

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

EDIT 2: Вам необходимо исправить ваш поток вместо этого. Вы возвращаетесь еще до того, как поток придет к проверке и изменению цвета. Также вам нужно сделать onchange event в своем поле пароля, где он будет менять цвет по длине следующим образом: в вашем текущем коде это делается на ready(), который не является правильным приращением/динамической проверкой.

Делай это.

$(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"; 
 
}

#wraper{ 
 
margin: 0 auto; 
 
height: 4000px; 
 
width:1000px; 
 
border: 2px solid black; 
 

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

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

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

 
.bordercoloron{ 
 
\t 
 
\t background-color: coral; 
 
} 
 

 
.bordercoloroff{ 
 
\t 
 
\t border: none; 
 
} 
 

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

 

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

 
#passstrength{ 
 
\t text-align: center; 
 
\t color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
\t 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    
 
\t <title></title> 
 
    <link rel="stylesheet" type="text/css" href="../css/jexerinter.css"> 
 
</head> 
 
\t 
 
<body> 
 

 
    <div id="wrap"> 
 
\t 
 
\t <div id="mainbox"> 
 
\t  
 
\t <form id="wholeform"> 
 
\t <input type="text" placeholder="FirstName" name="fname" id="fnameid"> 
 
\t <input type="text" placeholder="LastName" name="Lname" id="Lnameid"> \t 
 
\t <input type="text" placeholder="[email protected]" name="email" id="emailid"> 
 
\t <input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid"> 
 
\t \t 
 

 
    <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> 
 
    
 
\t <h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3> \t 
 
\t <select id="mf"> 
 
\t \t <option>Male</option> 
 
\t \t <option>Female</option> 
 
\t </select> 
 
    
 
    
 
    
 
\t \t <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()"> 
 
\t \t 
 
\t \t 
 
\t \t <input type="text" placeholder="Password" name="Pass" id="passid" /><br/> 
 
     <input type="text" placeholder="Confirm Password" name="confirmpass" id="confirmid" /> \t <br/> \t 
 
\t \t <span id="weak">Weak</span> 
 
     <span id="strong">Strong </span> 
 
     <span id="vstrong">Very strong</span> 
 
\t </form>  
 
\t  
 
\t </div> 
 
\t </div> 
 
    
 
</body> 
 
\t 
 
\t 
 
\t 
 
</html>

Fiddle ссылка

http://jsfiddle.net/9cGxs/

источник

2016-11-16 04:07:09 ScanQR

извините, что на самом деле это опечатка, как вы можете видеть, я не использовал pa.val для остальных, если еще. его все еще не меняющий цвет после удаления pa.val –

@AnuRajan исправить ваш поток, я обновил свой ответ. – ScanQR

Я сделал именно это, а также дал каждый span и id (if (pa.length <= 5) { $ («# слабый»). Css («цвет», «красный»);), но по какой-то причине его все еще не меняя цвет. Я использую консоль, а также пытался с возвышенным. Я редактировал скрипку, а слабый диапазон стал красным. ничего не изменилось. Любая подсказка? –

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

источник

2016-11-16 04:07:07 Paddy

извините, что на самом деле это опечатка, как вы можете видеть, я не использовал pa.val для остальной части if else. все еще не меняя цвет? –

Простым решением было бы поставить селекторы id на промежутки. Таким образом ' Weak Strong Очень сильный ', тогда называющий это напрямую $ (« # слабый »). Css (« цвет »,« красный »); – Paddy

кажется, что это исправление, изменив цвет от слабого до красного, но когда.длина = более 5 сильных и очень сильная не отвечает –

Это происходит потому, что ваш если/другое условие выполняется перед вашей проверкой длины

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

Либо удалите это условие еще OR выполнить код проверки длины до

источник

2016-11-16 06:17:15

i переместил длину в верхнюю часть, как показано на дисплее пользователя «TechBreak». все еще не меняя цвет фона. требуется возврат? –

@AnuRajan Я обновил свой ответ. Вам нужно добавить событие изменения в поле ввода пароля. – ScanQR

Вы должны удалить оператор return из своего предложения if.

В противном случае, ваш код будет возвращаться до выполнения остальной части кода:

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

источник

2016-11-16 06:17:20

JQuery Проверка пароля с длиной, не читаемой?

ответ

Смежные вопросы