jquery登录的异步验证操作示例
本文实例讲述了jquery登录的异步验证操作。分享给大家供大家参考,具体如下:
//定义一个json varvalidate={ username:false, pwd:false, pwded:false, verify:false, loginUsername:false, loginPwd:false } //存储错误信息 var$msg=""; //验证注册表单 $(function(){ //获取表单对象 varregister=$('form[name=register'); register.submit(function(){ varisOK=validate.username&&validate.pwd&&validate.pwded&&validate.verify; if(isOK){ returntrue; } //点击提交按钮依次触发失去焦点再次验证 $('input[name=username]',register).trigger('blur'); $('input[name=pwd]',register).trigger('blur'); $('input[name=pwded]',register).trigger('blur'); $('input[name=verify]',register).trigger('blur'); returnfalse; }); //验证用户名 $('input[name=username]',register).blur(function(){ varusername=$(this).val(); varspan=$(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(){ varpwd=$(this).val(); varspan=$(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(){ varpwded=$(this).val(); varspan=$(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(){ varverify=$(this).val(); varspan=$(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表单验证 varlogin=$('form[name=login]'); //登录提交事件 login.submit(function(){ if(validate.loginUsername&&validate.loginPwd){ returntrue; } //依次触发失去焦点动作 $('input[name=username]',login).trigger('blur'); $('input[name=pwd',login).trigger('blur'); returnfalse; }); //验证登录用户名 $('input[name=username]',login).blur(function(){ varusername=$(this).val(); varspan=$('#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(){ varpwd=$(this).val(); varspan=$('#login-msg'); //判断登录密码是否为空 if(pwd==''){ msg='请输入密码'; span.html(msg).addClass('error'); validate.loginPwd=false; return; } vardata={ 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程序设计有所帮助。