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表单验证(简单)
May 23 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jquery实现简易验证插件封装
Sep 13 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 中include()与require()的对比
2006/10/09 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
javascript数组去重小结
2016/03/07 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python实现代码行数统计示例分享
2014/02/10 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python一键去抖音视频水印工具
2018/09/14 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
《童年》教学反思
2014/02/18 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Python几种酷炫的进度条的方式
2022/04/11 Python
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js