行业资讯

弹出层--jquery定位小例子

发布时间：2020-06-16 13:27:51 作者：panguixiang
来源：网络 阅读：923

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改密码</title>
<link href="${pageContext.request.contextPath}/css/main.css"
    rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/base.css"
    rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>

</head>

<body>

    <div class="rihgt_memu">
        <div class="container" style="height: 560px;">
            <div class="tab_list">
                <h2>修改密码</h2>
                <div class="table2">
                    <form action="" name="querForm" id="querFormId" method="post">
                        <input type="hidden" name="id" id="id" value="${manager.id}" />
                        <table width="80%" class="fieldset" border="0" cellpadding="0"
                            cellspacing="0" style="margin-top: 15px; height: 200px;">
                            <tr>
                                <td width="33%" align="right" class="gray"><label>
                                        <span id="span1">${msg}</span>&nbsp;旧密码
                                </label></td>
                                <td align="left"><span> <input type="password"
                                        name="password" id="password" value="${password}"
                                        class="input_text_300" maxlength="12" onblur="oldpasword();" />
                                        <span id="div1" style="color: #bbb;">请输入您以前的密码</span></span></td>
                            </tr>
                            <tr>
                                <td align="right" class="gray"><label> <span
                                        id="span2"></span>&nbsp;新密码
                                </label></td>
                                <td align="left"><span> <input type="password"
                                        name="newpaswd" id="newpaswd" value="${newpaswd}"
                                        class="input_text_300" maxlength="12" onblur="newpassword();" />
                                        <span style="color: #bbb;">可由英文/数字/特殊字符组成,长度在6到12个字符</span></span></td>
                            </tr>
                            <tr>
                                <td align="right" class="gray"><label> &nbsp;<span
                                        id="span3"></span>确认新密码
                                </label></td>
                                <td align="left"><span> <input type="password"
                                        name="rnewpaswd" id="rnewpaswd" value=""
                                        class="input_text_300" maxlength="12" onblur="againPaswrd();" />
                                        <span style="color: #bbb;">请再次输入新的密码,必须与新密码保持一致</span></span></td>
                            </tr>
                            <tr height="50">
                                <td colspan="4" align="right"
                                    class="no_left_border no_bottom_border no_right_border">
                                    <div
                                        style="clear: both; text-align: center; margin-top: 10px; margin-bottom: 10px;">
                                        <input name="sub2" id="sub2" style="color: #fff;"
                                            type="button" class="button_bg2"
                                            onMouseOver="this.className='button_bg2_on'"
                                            onmouseout="this.className='button_bg2'"
                                            value="提交修改" />

                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出层 -->

    <div id="div_repeat" class="repeatdiv" style="visibility: hidden;">
        <div class="repeatdiv_title">
            <a href="#" onclick="updateclose();"><img
                src="${pageContext.request.contextPath}/p_w_picpaths/X_icon.gif"
                style="margin: 5px 5px 0 0;" /></a>
        </div>
        <div class="repeatdiv_table">
            <table width="100%" cellpadding="0" cellspacing="0"
                id="advance_table" border="0">
                <input type="hidden" id="mesidhid" value="" />
                <tr>
                    <td align="right"><img id="imgiss"
                        src="${pageContext.request.contextPath}/p_w_picpaths/login_success_ico.gif"
                        width="24" height="24" /></td>
                    <td align="left"><span id="uppaswordId"
                        style="font-size: 12px; font-weight: bold; color: #0a6505;"></span></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script language="javascript">
//验证旧密码格式
var regrpwd = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,12}$/;
function oldpasword() {
    var password = $("#password").val();
    if(password.length>0&&!regrpwd.test(password)) {
        $("#span1").empty();
         $("#span1").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
        return;
    }else if(password.length>0&&regrpwd.test(password)){
        $("#span1").empty();
         $("#span1").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/sucess.gif'/>");
         return;
    }
    else if(password.length==0) {
        $("#span1").empty();
         return;
    }
}
//验证新密码格式
function newpassword() {
    var newpaswd = $("#newpaswd").val();
    if(newpaswd.length>0&&!regrpwd.test(newpaswd)) {
         $("#span2").empty();
          $("#span2").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
           return;
     }
    else if(newpaswd.length>0&&regrpwd.test(newpaswd)){
         $("#span2").empty();
          $("#span2").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/sucess.gif'/>");
          return;
     }
    else if(newpaswd.length==0){
         $("#span2").empty();
          return;
    }
}
//验证再次输入的密码与新密码是否一致
function againPaswrd() {
    if($("#rnewpaswd").val().length>0&&!regrpwd.test($("#rnewpaswd").val())){
         $("#span3").empty();
          $("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
          return;
    }
    else if($("#newpaswd").val()!=$("#rnewpaswd").val()) {
         $("#span3").empty();
          $("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
          return;
    }else if($("#rnewpaswd").val().length>0&&regrpwd.test($("#rnewpaswd").val())){
        $("#span3").empty();
        $("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/sucess.gif'/>");
        return;
    }
    else if($("#rnewpaswd").val().length==0) {
        $("#span3").empty();
        return;
    }
}
//提交修改
function setPassword() {
    var password = $("#password").val();
    var newpaswd = $("#newpaswd").val();
    var rnewpaswd = $("#rnewpaswd").val();
    var i=0;
  //验证登陆名
      if(!regrpwd.test(password)) {
          $("#span1").empty();
          $("#span1").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
       i=1;
      }
     /*  else {
          $("#span1").empty();
           $("#span1").html("<img src='/beyondsoft/p_w_picpaths/sucess.gif'/>");
      } */
     
      if(!regrpwd.test(newpaswd)) {
          $("#span2").empty();
           $("#span2").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
           i=1;
         }
     /* else{
          $("#span1").empty();
           $("#span1").html("<img src='/beyondsoft/p_w_picpaths/sucess.gif'/>");
      } */
     if(!regrpwd.test(rnewpaswd)) {
          $("#span3").empty();
            $("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
            i=1;
     }
     else if(rnewpaswd!=newpaswd) {
          $("#span3").empty();
           $("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");
           i=1;
      }  
     if(i==0){
            $.ajax({//post方式可以提交中文不会出现乱码.get会出现乱码
                url : "${pageContext.request.contextPath}/admin/manager/setpaswd",
                type : "post",
                data : {upassword:password,unewpaswd:newpaswd},
                success : function(fdata) {
                    if( fdata==0 ) { //表示原密码输入错误
                        $("#mesidhid").val(0);
                        $("#uppaswordId").css("color","red").text("旧密码输入错误");
                        $("#imgiss").attr("src","${pageContext.request.contextPath}/p_w_picpaths/error_ico.jpg");
                        var content = window.document.getElementById("div_repeat");
                        //弹出(设置透明度为1并且visibility为visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left",$('#div1').offset().left).css("top",$('#div1').offset().top);
                        //3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
                        $("#div_contents4").fadeTo(3000,1,function(){
                            content.style.opacity = "0";
                            content.style.visibility="hidden";
                        });
                       
                    }
                    else if(fdata == -1) {
                        $("#mesidhid").val(-1);
                        $("#uppaswordId").css("color","red").text("发生异常,密码修改失败");
                        $("#imgiss").attr("src","${pageContext.request.contextPath}/p_w_picpaths/error_ico.jpg");
                        var content = window.document.getElementById("div_repeat");
                        //弹出(设置透明度为1并且visibility为visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
                        //3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
                        $("#div_contents4").fadeTo(3000,1,function(){
                            content.style.opacity = "0";
                            content.style.visibility="hidden";
                        });
                   
                    }
                    else if(fdata == 1) {
                        $("#mesidhid").val(1);
                        $("#uppaswordId").css("color","red").text("密码修改成功");
                        $("#imgiss").attr("src","${pageContext.request.contextPath}/p_w_picpaths/login_success_ico.gif");
                        var content = window.document.getElementById("div_repeat");
                        //弹出(设置透明度为1并且visibility为visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
                        //3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
                        $("#div_contents4").fadeTo(3000,1,function(){
                            content.style.opacity = "0";
                            content.style.visibility="hidden";
                        });
                          window.setTimeout("relogin('${pageContext.request.contextPath}/admin/login')",3100);
                    }
                }
            });
      }
     
}

//关闭弹出的删除提示层
function updateclose() {
    var content3 = document.getElementById("div_repeat");
        content3.style.visibility="hidden";
         if($("#mesidhid").val()==1){
         relogin('${pageContext.request.contextPath}/admin/login');
         }
}

function relogin(logurl) {
    location.href=logurl;
}
</script>
</html>
 

推荐阅读：
  1. python列表函数小例子
  2. 重构Refactor的小例子

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

职场 html 休闲

上一篇：[网页设计]点睛价值

下一篇：怎么查看linux中的可用内存大小

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号