2013-03-06 67 views
0

我遇到了onkeydown事件的問題。我在2個輸入元素上使用它,但它只適用於第一個。第二,它只是給了我錯誤:Uncaught TypeError: object is not a function
jQuery的:輸入onkeydown事件在第一個元素上工作,但不在第二個

function count() { 
    var length = $('#pass').length; 
    if (length < 32) { 
     $('#length').text(length + ' characters out of 32'); 
    } 
} 
function match() { 
    if ($('#pass').attr('value') == $('#pass2').attr('value')) 
    { 
     $('#match').text('<img src="/css/images/check.png" /> Passwords match.'); 
    } 
    else 
    { 
     $('#match').text('<img src="/css/images/close.png" /> Passwords do not match.'); 
    } 
} 

HTML:

<form method='post'> 
    <input type='password' name='pass' value='' id='pass' onkeydown='count()' /> 
    <span id='length'></span> 
    <input type='password' name='pass2' value='' id='pass2' onkeydown='match()' /> 
    <span id='match'></span> 
</form> 
+0

使用jquery.validate JS驗證表單字段。 – 2013-03-06 08:51:50

+0

它適用於我,你在哪裏放置的功能? – 2013-03-06 08:52:38

+0

另一個問題在這裏:「var length = $('#pass')。length;」應該是「var length = $('#pass').val().length;」 – lvil 2013-03-06 08:56:17

回答

1

嘗試以下代碼塊

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script> 
      function count() { 
      var length = $('#pass').val().length; 
      if (length < 32) { 
       $('#length').text(length + ' characters out of 32'); 
      } 
      } 
      function match() { 
      var matchStatus = $('#match').find('span'); 
      var matchImg = $('#match').find('img'); 
      if ($('#pass').val() == $('#pass2').val()) { 
       matchImg.prop('src', '/css/images/check.png'); 
       matchStatus.html('Passwords match'); 
      } 
      else { 
       matchImg.prop('src', '/css/images/close.png'); 
       matchStatus.html('Passwords do not match'); 
      } 
      } 

     </script> 
    </head> 
    <body> 
     <form method='post'> 
     <input type='password' name='pass' value='' id='pass' onkeyup='count()' /> 
     <span id='length'></span> 
     <input type='password' name='pass2' value='' id='pass2' onkeyup='match()' /> 
     <span id='match'> 
      <img src="" /> 
      <span></span> 
     </span> 
     </form> 
    </body> 
</html> 

錯誤我已經找到

  1. $( '#通')長度
  2. 的onkeydown - 應該是的onkeyup - 因爲首先它會火的onkeydown然後將放置文本(這樣的長度和平等會給出錯誤的結果)
  3. 使用腳本訪問項目時儘可能簡化代碼。不要一次性做$('#match')。文本。而是分配給一個var obj並使用它。

希望這將幫助你.. :)

0

比賽是一個預先定義的JS所以更改matchmatched

0

使用jquery.validate JS

 <html> 
    <head> 
     <title> Password and Confirm Password Validation Using Jquery </title> 
     <script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script> 
     <script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.validate.js"></script> 
    <script> 

    function validatePassword(){ 
     var validator = $("#loginForm").validate({ 
     rules: {      
      password :"required", 
      confirmpassword:{ 
      equalTo: "#password" 
      } 
      },        
      messages: { 
      password :" Enter Password", 
      confirmpassword :" Enter Confirm Password Same as Password" 
      } 
     }); 
     if(validator.form()){ 
     alert('Sucess'); 
     } 
    } 

    </script> 
    </head> 

    <body> 
     <form method="post" id="loginForm" name="loginForm"> 
     <table cellpadding="0" border="1"> 
      <tr> 
      <td>Password</td> 
      <td><input tabindex="1" size="40" type="password" name="password" id="password"/></td> 
      </tr> 
      <tr> 
      <td>Confirm Password</td> 
      <td><input tabindex="1" size="40" type="password" name="confirmpassword" id="confirmpassword"/></td> 
      </tr> 
      <tr> 
      <td colspan="2" align="center"><input tabindex="3" type="button" value="Submit" onClick="validatePassword();"/></td>   
      </tr> 
     </table>   
     </form> 
    </body> 
    </html> 
相關問題