本文实例讲述了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; }); })
PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:
JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]