jquery登录的异步验证操作示例


Posted in jQuery onMay 09, 2019

本文实例讲述了jquery登录的异步验证操作。分享给大家供大家参考,具体如下:

//定义一个json
var validate = {
  username : false,
  pwd   : false,
  pwded  : false,
  verify  : false,
  loginUsername : false,
  loginPwd :false
}
//存储错误信息
var $msg = "";
//验证注册表单
$(function(){
  //获取表单对象
  var register = $('form[name=register');
  register.submit(function(){
    var isOK = validate.username && validate.pwd && validate.pwded && validate.verify;
    if(isOK){
      return true;
    }
    //点击提交按钮依次触发失去焦点再次验证
    $('input[name=username]',register).trigger('blur');
    $('input[name=pwd]',register).trigger('blur');
    $('input[name=pwded]',register).trigger('blur');
    $('input[name=verify]',register).trigger('blur');
    return false;
  });
  //验证用户名
  $('input[name=username]',register).blur(function(){
    var username = $(this).val();
    var span = $(this).next();
    //用户名不能为空
    if(username == ''){
      msg = '用户名不能为空';
      span.html(msg).addClass('error');
      validate.username = false;
      return;
    }
    //正则判断
    if(!/^\w{2,14}$/g.test(username)){
      msg = '必须是2-14个字符,字母,数字,下划线';
      span.html(msg).addClass('error');
      validate.username = false;
      return;
    }
    //异步验证用户名是否存在
    $.post(APP + '/Reg/ajax_username',{username : username},function(status){
      console.log(status);
      if(status){
        msg = '通过检测';
        span.html(msg).removeClass('error');
        validate.username = true;
      }else{
        msg = '用户名已经存在';
        span.html(msg).addClass('error');
        validate.username = false;
      }
    },'json');
  });
  //验证密码
  $('input[name=pwd]',register).blur(function(){
    var pwd = $(this).val();
    var span = $(this).next();
    //密码不能为空
    if(pwd == ''){
      msg = '密码不能为空';
      span.html(msg).addClass('error');
      validate.pwd = false;
      return;
    }
    //正则验证
    if(!/^\w{6,20}$/g.test(pwd)){
      msg = '密码必须由6-20个字母,数字,或者下划线组成';
      span.html(msg).addClass('error');
      validate.pwd = false;
      return;
    }
    msg = '通过检测';
    span.html(msg).removeClass('error');
    validate.pwd = true;
  });
  //确认密码
  $('input[name=pwded]',register).blur(function(){
    var pwded = $(this).val();
    var span = $(this).next();
    //确认密码
    if(pwded == ''){
      msg = '请确认密码';
      span.html(msg).addClass('error');
      validate.pwded = false;
      return;
    }
    //判断密码是否一致
    if(pwded != $('input[name=pwd]',register).val()){
      msg = '密码不一致';
      span.html(msg).addClass('error');
      validate.pwded = false;
      returnl;
    }
    msg = '通过检测';
    span.html(msg).removeClass('error');
    validate.pwded = true;
  });
  //验证验证码
  $('input[name=verify]',register).blur(function(){
    var verify = $(this).val();
    var span = $(this).next().next();
    //不能为空
    if(verify == ''){
      msg = '请输入验证码';
      span.html(msg).addClass('error');
      validate.verify = false;
      return;
    }
    //异步判断验证码
    $.post(APP + '/Reg/ajax_code',{verify : verify},function(status){
      if(status){
        msg = '通过检测';
        span.html(msg).removeClass('error');
        validate.verify = true;
      }else{
        msg = '验证码错误';
        span.html(msg).addClass('error');
        validate.verify = false;
        return;
      }
    },'json');
  });
  //登录form表单验证
  var login = $('form[name=login]');
  //登录提交事件
  login.submit(function(){
    if(validate.loginUsername && validate.loginPwd){
      return true;
    }
    //依次触发失去焦点动作
    $('input[name=username]',login).trigger('blur');
    $('input[name=pwd',login).trigger('blur');
    return false;
  });
  //验证登录用户名
  $('input[name=username]',login).blur(function(){
    var username = $(this).val();
    var span = $('#login-msg');
    //判断是否为空
    if(username == ''){
      msg = '请输入账号';
      span.html(msg).addClass('error');
      validate.loginUsername = false;
      return;
    }
    msg = '';
    span.html(msg);
    validate.loginUsername = true;
  });
  //验证登录密码
  $('input[name=pwd]',login).blur(function(){
    var pwd = $(this).val();
    var span = $('#login-msg');
    //判断登录密码是否为空
    if(pwd == ''){
      msg = '请输入密码';
      span.html(msg).addClass('error');
      validate.loginPwd = false;
      return;
    }
    var data = {
        username : $('input[name=username]',login).val(),
        pwd : pwd
      };
    //异步验证
    $.post(APP + '/Login/ajax_login',data,function(status){
      if(status){
        msg = '';
        span.html(msg).removeClass('error');
        validate.loginUsername = true;
        validate.loginPwd = true;
      }else{
        msg = '用户名或密码错误';
        span.html(msg).addClass('error');
        validate.loginUsername = false;
        validate.loginPwd = false;
      }
    },'json');
    msg = '';
    span.html(msg);
    validate.loginPwd = true;
  });
})
jQuery 相关文章推荐
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
详解jquery和vue对比
Apr 16 #jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
详解JS函数重载
2014/12/04 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python读取键盘输入的2种方法
2015/06/16 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
pymysql的简单封装代码实例
2020/01/08 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python进行统计建模
2020/08/10 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
仓库主管的岗位职责
2013/12/04 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
生日庆典策划方案
2014/06/02 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
银行授权委托书格式
2014/10/10 职场文书
个人简历求职信范文
2015/03/20 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Python图像处理库PIL详细使用说明
2022/04/06 Python