zoukankan      html  css  js  c++  java
  • 利用 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>
    
  • 相关阅读:
    Python 内置函数
    Python OS 文件/目录方法
    python import导入模块
    Python 变量、作用域、闭包
    Python3 迭代器(generate)与生成器(yield) 装饰器(decorator) 上下文管理器(context manager)
    SpringBoot Admin的简单使用
    java学习网址
    idea的破解码
    Jmeter响应内容显示乱码问题的解决办法
    ClickHouse 库引擎
  • 原文地址:https://www.cnblogs.com/forsaken627/p/8523309.html
Copyright © 2011-2022 走看看