密码修改Ajax+jQuery验证

最新推荐文章于 2021-08-06 14:03:55 发布

百步穿杨张巍警

最新推荐文章于 2021-08-06 14:03:55 发布

阅读量603

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45897449/article/details/105477352

本文介绍了一个使用Ajax和jQuery进行密码修改验证的前端表单实现，包括旧密码、新密码及确认密码的验证流程，确保密码安全性。

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

丑的一 * 修改密码Ajax+jQuery验证

输入旧密码Ajax验证非空，密码是否正确
输入新密码jQuery判断是否为旧密码和非空
再次输入判断两次是否一样

前端简单form表单

<form id="userForm" method="post" action="${pageContext.request.contextPath }/modifypwd.action">
                      <!--div的class 为error是验证错误，ok是验证成功-->
                      
                      <div class="">
                          <label for="oldPassword">旧密码：</label>
                          <input type="password" name="oldpassword" id="oldpassword" onblur="check()"> 
        <font color="red"></font>
                      </div>
                      <div id="info1">${message}</div>
                      <div>
                          <label for="newPassword">新密码：</label>
                          <input type="password" name="newpassword" id="newpassword" onblur="check1()"> 
        <font color="red"></font>
                      </div>
                      <div id="info2">${message}</div>
                      <div>
                          <label for="reNewPassword">确认新密码：</label>
                          <input type="password" name="rnewpassword" id="rnewpassword" onblur="check2()"> 
        <font color="red"></font>
                      </div>
                      <div id="info3">${message}</div>
                      <div class="providerAddBtn">
                          <!--<a href="#">保存</a>-->
                          <!-- <input type="button" name="save" id="save" value="保存" class="input-button"> -->
                          <input type="button" value="修改" id="savebutton" onclick="check3()">
                      </div>
</form>

。。。格式有点丑

写一个js对信息进行判断

<script type="text/javascript">
        function check() {
      var oldpassword=$("#oldpassword").val();
      if (oldpassword==null ||oldpassword=="") {
       document.getElementById("info1").innerText = "密码不能为空";
       $('#info1').css("color","red");
       return;
      }else {
       $.post("${pageContext.request.contextPath }/oldpwd.action",
         {"oldpassword":oldpassword},
         function(data){
          if (data.toString()=="ok！") {
           $('#info1').css("color","green");
          }else{
           $('#info1').css("color","red");
          }
          $("#info1").html(data);
         });
      }
     }
        function check1() {
      var newpassword=$("#newpassword").val();
      var oldpassword=$("#oldpassword").val();
      if (newpassword==null ||newpassword=="") {
       document.getElementById("info2").innerText = "新密码不能为空";
       $('#info2').css("color","red");
       return;
      }else if (newpassword==oldpassword) {
       document.getElementById("info2").innerText = "新密码不能为旧密码";
       $('#info2').css("color","red");
      }else {
       document.getElementById("info2").innerText = "ok！";
       $('#info2').css("color","green");
      }
     }
        function check2() {
      var rnewpassword=$("#rnewpassword").val();
      var newpassword=$("#newpassword").val();
      if (rnewpassword==null ||rnewpassword=="") {
       document.getElementById("info3").innerText = "再次输入密码不能为空";
       $('#info3').css("color","red");
       return;
      }else if (rnewpassword!=newpassword) {
       document.getElementById("info3").innerText = "两次密码不相同，请核对后重新输入";
       $('#info3').css("color","red");
      }else {
       document.getElementById("info3").innerText = "ok！";
       $('#info3').css("color","green");
      }
     }
        function check3() {
         $('#oldpassword').blur();
         $('#newpassword').blur();
         $('#rnewpassword').blur();
      /* var info1=$("#info1").val();
      var info2=$("#info2").val();
      var info3=$("#info3").val(); */
      if(document.getElementById("info1").innerHTML=="ok！"&&
         document.getElementById("info2").innerHTML=="ok！"&&
         document.getElementById("info3").innerHTML=="ok！"){
       if(confirm("修改密码后需要重新登录，您确定要修改密码？")){
        $("#userForm").submit();
       }
      }
     }
        
       </script>

都是简单的操作，接下来需要Ajax操作对旧密码进行验证

//旧密码验证
 @RequestMapping("/oldpwd")
 public void oldpwd(String oldpassword,HttpServletResponse response,HttpSession session) {
        User user1=  (User) session.getAttribute("user");
        User user=service.valpwd(user1.getId(),oldpassword);
        String answer = "";
        if (user==null){
            answer="对不起，您输入的密码有误！";
        }else {
         answer="ok！";
        }
        System.out.println(answer);
        try {
   response.setContentType("text/html");
   response.setCharacterEncoding("utf-8");
   PrintWriter writer=response.getWriter();
   writer.write(answer);
   writer.flush();
   writer.close();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }