利用 jQuery 来验证密码两次输入是否相同

html

    <div class="row">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">{{ query_set }}密码修改</h3>
            </div>
            <div class="panel-body">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="pass1" class="col-sm-3 control-label">密码</label>
                        <input id="pass1" class="form-control" type="password" name="password1">
                    </div>
                    <div class="form-group">
                        <label for="pass2" class="col-sm-3 control-label">重复密码</label>
                        <input id="pass2" class="form-control" type="password" name="password2"
                               onkeyup="validate()">
                    </div>
                    <div class="form-group">
                        <span id="tishi"></span>
                        <button class="btn btn-info pull-right" value="" type="submit" disabled>提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

css

    <style>
        .focusedInput-waring {
            border-color: #EF5B50;
            outline: 0;
            outline: thin dotted \9;
            -webkit-box-shadow: 0 0 8px #EF5B50;
            box-shadow: 0 0 8px #EF5B50;
        }

        .focusedInput-info {
            border-color: #33CC3B;
            outline: 0;
            outline: thin dotted \9;
            -webkit-box-shadow: 0 0 8px #33CC3B;
            box-shadow: 0 0 8px #33CC3B;
        }
    </style>

js

    <script>
        function validate() {

            var pwd1 = $("input[name='password1']").val();
            var pwd2 = $("input[name='password2']").val();
            <!-- 对比两次输入的密码 -->
            if (pwd2 == pwd1) {
                $("input[name='password1']").addClass("focusedInput-info").removeClass("focusedInput-waring");
                $("input[name='password2']").addClass("focusedInput-info").removeClass("focusedInput-waring");
                $("button").removeAttr("disabled");
            }
            else {
                $("input[name='password1']").addClass("focusedInput-waring").removeClass("focusedInput-info");
                $("input[name='password2']").addClass("focusedInput-waring").removeClass("focusedInput-info");
                $("button").attr("disabled", "disabled");
            }
        }
    </script>