jQuery+ajax实现修改密码验证功能实例详解


Posted in jQuery onJuly 06, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script type="text/JavaScript">
  //获取url中的参数
  $(function(){
    var userName = window.location.href;
    var aa = userName.indexOf("=");
      console.log(userName);
    if (aa == -1)
      return "";
    userName=userName.substring(aa+1);
    //给hidden赋值并显示
    $("#userName").val(userName).attr("type","text");
    //ajax请求修改密码
    var rePassword = $("#repeatPassword").val();
    //6到15位字母或数字
    var reg=/^[0-9a-zA-Z]{6,15}$/;
    //新密码校验
    $("#newPassword").blur(function(){
      $("#msg").css("display","none");
      var newPassword = $("#newPassword").val();
      if(newPassword==""||newPassword==null){
       $("#msg").html("请输入新密码!").css("display","block");
      }elseif(!reg.test(newPassword)){
       $("#msg").html("密码格式不正确,请重新输入!").css("display","block");
      }
    });
    //重复密码校验
    $("#repeatPassword").blur(function(){
      var newPass = $("#newPassword").val();
      var repPass = $("#repeatPassword").val();
      if(newPass != repPass){
       $("#msg").html("两次输入密码不一致,请重输!").css("display","block");
      }
    });
    //表单提交前校验
    $("#updateBtn").click(function(){
      var flag = true;
      var newPass = $("#newPassword").val();
      var repPass = $("#repeatPassword").val();
      var reg1=/^[0-9a-zA-Z]{6,15}$/;
      if(!reg1.test(newPass)||newPass!=repPass||newPass ==""||newPass==null){
       flag = false;
      }
      if(flag){
       $.ajax({
         url:"/HuaMuWebsite/userManage/editPassword?userName="+userName,
         type:"POST",
         async:false,
         data:$("#fm").serialize(), //表单数据序列化, 可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。
         success:function(data){
         //json字符串转为json对象
         var jsonObj=eval("("+data+")");
         if(jsonObj.success != null){
           alert(jsonObj.success);
           window.location.href="/HuaMuWebsite/admin/login.html" rel="external nofollow" ;
         }else{
           alert(jsonObj.failure);
         }
       },
       error:function(e){
         alert("请求出错!");
       }
       });
      }   
});
  });
</script>
jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
You might like
php中adodbzip类实例
2014/12/08 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
Highcharts入门之简介
2016/08/02 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
angular6 填坑之sdk的方法
2018/12/27 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python字符串替换的2种方法
2014/11/30 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
基于Python实现天天酷跑功能
2021/01/06 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
采购主管工作职责
2013/12/12 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
个人租房协议书样本
2014/10/01 职场文书
责任书格式
2015/01/29 职场文书
太空授课观后感
2015/06/17 职场文书
创业计划书之寿司
2019/07/19 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript