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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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
php数组合并的二种方法
2014/03/21 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
数据库方面面试题
2012/04/22 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
C#笔试题
2015/07/14 面试题
求职信范文大全
2014/05/26 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
大学生实习证明范本
2014/09/19 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书