重置密码功能实现-优快云博客

本文介绍了一个简单的重置密码功能实现方法，通过点击按钮显示模态框并提供输入新密码和电子邮箱地址的表单。此外，还展示了如何通过JavaScript触发这一流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 //发送验证码
    $("#get_phone_code").click(function(){
        reset_passwd_phone();
    })

    function reset_passwd_phone(){
        $('#reset_passwd_phone').modal();
    }

<div class="modal fade" id = "reset_passwd_phone">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">重置密码</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<!--    手机号重置密码结束-->

                <input class="input-xlarge pull-left" type="text" id="pwd" name="phone_code" placeholder="验证码" style="width:100px;" >   <input type="button" id = "get_phone_code" value="获取验证码">（验证码将发送到 <span style="color:red;"><?php echo $userInfo['mobile'];?> </span> 这个手机上）若您尚未验证手机号码，请至<a href="account_info">账户信息</a>栏目进行验证

//发送验证码 $("#get_phone_code").click(function(){ reset_passwd_phone(); })
function reset_passwd_phone(){ $('#reset_passwd_phone').modal(); }
<div class="modal fade" id = "reset_passwd_phone"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button> <h4 class="modal-title">重置密码</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div>
</form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>
<input class="input-xlarge pull-left" type="text" id="pwd" name="phone_code" placeholder="验证码" style="width:100px;" >   <input type="button" id = "get_phone_code" value="获取验证码">（验证码将发送到 <span style="color:red;"><?php echo $userInfo['mobile'];?> </span> 这个手机上）若您尚未验证手机号码，请至<a href="account_info">账户信息</a>栏目进行验证