jQuery密码验证不能完全正常工作

时间:2012-05-03 19:45:16

标签: jquery jquery-validate

我一直有这个问题,我写的代码只是最低限度的工作。因此,我尝试检查密码是否弱的部分有效,但我检查确认的密码和新密码是否完全相同的部分不起作用。我做错了什么?

http://jsfiddle.net/5QYer/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Users</title>
        <script src="js/jquery-1.7.2.js"></script>
        <script src="js/login.js"></script>
        <script src="js/buildsit.js"></script>
        <script src="js/buttons.js"></script>
        <script src="js/jquery.url.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.validate.password.css" />
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <script type="text/javascript" src="js/jquery.validate.password.js"></script>
        <link type="text/css" rel="stylesheet" href="css/main.css" />
        <meta name="author" content="rotem" />
<script id="demo" type="text/javascript">
$(document).ready(function() {

    console.debug("validate");
    // validate signup form on keyup and submit
    $("#changePwd").validate({
        rules: {
            prevPwd: {
                required: true,
            },
            newPwd: {
                required: true,
                password: "#prevPwd"
            },
            confPwd: {
                required: true,
                equalTo: "#newPwd"
            }
        },
        messages: {
            confPwd: {
                required: "Repeat your password",
                minlength: jQuery.format("Enter at least {0} characters"),
                equalTo: "Enter the same password as above"
            }
        },
        // the errorPlacement has to take the table layout into account
        errorPlacement: function(error, element) {
            error.prependTo( element.parent().next() );
        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function() {
            alert("submitted!");
        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set &nbsp; as text for IE
            console.debug("success!!!");
            label.html("&nbsp;").addClass("checked");
        }
    });
    console.debug("validate");
    $("#newPwd").valid();
    $("#confPwd").valid();
});
</script>
<!-- Date: 2012-04-18 -->
</head>
<body>
      <div class="wrap">
        <div class="header">
        </div>
        <div class="contentContainer">
            <div class="sideMenu">
            </div>
                    <div class="content">
                        <form id="changPwd">
                        <table>
                        <tr>
                        <td>
                        <label for="email">Email:</label>
                        </td>
                        <td>
                        <input type="text" id="email" name="email" value="admin"/>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <label for="prevPwd">Previous Password:</label>
                        </td>
                        <td>
                        <input id="prevPwd" name="prevPwd" type="password"/>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <label for="newPwd">New Password:</label>
                        </td>
                        <td>
                        <input id="newPwd" name="newPwd" type="password" class="password error"/>
                        <label for="newPwd" generated="true" class="error" style="display: inline; "/>
                        </td>
                        <td>
                        <div class="password-meter">
                        <div class="password-meter-message password-meter-message-weak">Weak</div>
                        <div id="passwordStrengthDiv" class="password-meter-bg">
                        <div class="password-meter-bar password-meter-weak"/>
                        </div>
                        </div>
                        </td>
                        </tr>
                        <tr>
                        <td>
                        <label for"confpwd"="">Confirm Password:</label>
                        </td>
                        <td>
                        <input id="confPwd" name="confPwd" type="password"/>
                        </td>
                        </tr>
                        <tr>
                        <td/>
                        <td>
                        <input type="submit"/>
                        </td>
                        </tr>
                        </table>
                        </form>
                        </div>
            </div>
            </div>
        <script type="text/javascript">
        buildSite();
        buildEditUsers();
        </script>
        </body>
    </html>

0 个答案:

没有答案