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中的deferred对象和extend方法详解
May 08 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
基于JQuery实现页面定时弹出广告
May 08 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获取地址栏信息的代码
2008/10/08 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python合并同类型excel表格的方法
2018/04/01 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python dataframe NaN处理方式
2019/12/26 Python
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
面试后感谢信
2014/02/01 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年预算员工作总结
2014/12/05 职场文书
介绍信范文
2015/01/31 职场文书
校长新学期寄语2016
2015/12/04 职场文书
社区宣传标语口号
2015/12/26 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers