Question

我遇到了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>

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

我找到的错误

$（ '＃通'）。长度
onkeydown - 应该是onkeyup - 因为首先它将触发onkeydown然后将放置文本（所以长度和相等会给出错误的结果）
使用脚本访问项目时，尽可能简化代码。不要一次又一次地执行$（'#matc'）。文本。而是分配给一个var obj并使用它。

希望这会对你有所帮助.. :)

Answer 2

匹配是js中的预定义，因此将match更改为matched

Answer 3

使用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>

输入onkeydown事件适用于第一个元素但不适用于第二个元素

3 个答案: