0

我遇到了 onkeydown 事件的问题。我在 2 个输入元素上使用它，但它只适用于第一个。第二，它只是给了我错误：Uncaught TypeError: object is not a function.
jQuery： 

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>
4

3 回答 3

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. $('#pass').length
  2. onkeydown - 应该是 onkeyup - 因为首先它会触发 onkeydown 然后会放置文本（所以长度和相等会给出错误的结果）
  3. 当您使用脚本访问项目时，使代码尽可能简单。不要一次又一次地做 $('#match').text 。而是分配给一个 var obj 并使用它。

希望对你有帮助.. ：）

于 2013-03-06T09:02:34.360 回答
0

match 是 js 中的预定义，所以更改match为matched

于 2013-03-06T08:52:01.400 回答
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>
于 2013-03-06T08:52:52.167 回答