2013-03-06 71 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> 
相关问题