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中封装函数传递当前元素的方法示例
May 05 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现增删改查
Dec 22 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
生成静态页面的PHP类
2006/07/15 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python Cookie 读取和保存方法
2018/12/28 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
致跳高运动员加油稿
2014/02/12 职场文书
销售助理岗位职责
2014/02/21 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
年终工作总结范文2014
2014/11/27 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
python中mongodb包操作数据库
2022/04/19 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS