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

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

<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>
(0)

相关推荐

  • jquery判断密码强度的验证代码

    本文实例讲述了jquery判断密码强度的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.

  • jQuery表单验证之密码确认

    众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框中都有内容?两个密码框中是一致的?如果一个没有输入会给出提示?OK这一切都可以用JS来实现,具体思想很简单啦,就是编写事件获取dom节点,判断对象的取值呀? 那么编写什么事件?应该是onblur事件~.而且要为两个密码框都加上失去焦点的blur事件.利用jQuery比较方便勒. 话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="

  • jQuery Easyui 验证两次密码输入是否相等

    什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是

  • 基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

  • jQuery Password Validation密码验证

    jQuery Password Validation(密码验证)插件扩展了 jQuery Validate 插件,提供了两种组件: 一种评价密码的相关因素的功能:比如大小写字母的混合情况.字符(数字.特殊字符)的混合情况.长度.与用户名的相似度(可选的). 一种使用评价功能显示密码强度的验证插件自定义方法.显示的文本可以被本地化. 您可以简单地自定义强度显示的外观.本地化消息显示,并集成到已有的表单中. 该插件目前版本是 1.0.0. 使用方式 如需使用 Password Validation(

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

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/JavaScript"> //获取url中的参数 $(function(){ var userName = window.location.href; var aa = userName.indexOf("="); console.log(userName); if (aa == -1) return ""; userName=userName

  • Java+Ajax实现的用户名重复检验功能实例详解

    本文实例讲述了Java+Ajax实现的用户名重复检验功能.分享给大家供大家参考,具体如下: 今天,我来教大家怎么实现Java+Ajax实现用户名重复检验. 实体类代码: /** * */ package com.hqj.dao; /** * @author HuangQinJian 下午9:12:19 2017年4月23日 */ public class User { private int id; private String name; private String password; /*

  • AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能.分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max). 在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上.为了取得这个c

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

  • Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

  • jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • Golang基于JWT与Casbin身份验证授权实例详解

    目录 JWT Header Payload Signature JWT的优势 JWT的使用场景 Casbin Casbin可以做什么 Casbin不可以做什么 Casbin的工作原理 实践 登录接口请求 Token实现 使用Redis存储Token信息 用Casbin做授权管理 实现Casbin的策略 创建Todo JWT JSON Web Toekn(JWT)是一个开放标准RFC 7519,以JSON的方式进行通信,是目前最流行的一种身份验证方式之一. eyJhbGciOiJIUzI1NiIs

  • mui上拉加载功能实例详解

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

  • jQuery.datatables.js插件用法及api实例详解

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

随机推荐