首页 > 编程 > JavaScript > 正文

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

2019-11-19 11:36:58
字体:
来源:转载
供稿:网友

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

//定义一个jsonvar 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;  });})

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.VeVB.COm/regex/javascript

正则表达式在线生成工具:
http://tools.VeVB.COm/regex/create_reg

更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表