小程序界面模板_jquery登录的异步验证操作示例

jquery登录的异步验证操作示例       这篇文章主要介绍了jquery登录的异步验证操作,涉及jQuery针对表单提交登录的用户名、密码验证与异步post提交相关操作技巧,需要的朋友可以参考下
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 = '用户名不能为空'; (msg).addClass('error'); validate.username = false; return; //正则判断 if(!/^\w{2,14}$/g.test(username)){ msg = '必须是2-14个字符,字母,数字,下划线'; (msg).addClass('error'); validate.username = false; return; //异步验证用户名是否存在 $.post(APP + '/Reg/ajax_username',{username : username},function(status){ console.log(status); if(status){ msg = '通过检测'; (msg).removeClass('error'); validate.username = true; }else{ msg = '用户名已经存在'; (msg).addClass('error'); validate.username = false; },'json'); //验证密码 $('input[name=pwd]',register).blur(function(){ var pwd = $(this).val(); var span = $(this).next(); //密码不能为空 if(pwd == ''){ msg = '密码不能为空'; (msg).addClass('error'); validate.pwd = false; return; //正则验证 if(!/^\w{6,20}$/g.test(pwd)){ msg = '密码必须由6-20个字母,数字,或者下划线组成'; (msg).addClass('error'); validate.pwd = false; return; msg = '通过检测'; (msg).removeClass('error'); validate.pwd = true; //确认密码 $('input[name=pwded]',register).blur(function(){ var pwded = $(this).val(); var span = $(this).next(); //确认密码 if(pwded == ''){ msg = '请确认密码'; (msg).addClass('error'); validate.pwded = false; return; //判断密码是否一致 if(pwded != $('input[name=pwd]',register).val()){ msg = '密码不一致'; (msg).addClass('error'); validate.pwded = false; returnl; msg = '通过检测'; (msg).removeClass('error'); validate.pwded = true; //验证验证码 $('input[name=verify]',register).blur(function(){ var verify = $(this).val(); var span = $(this).next().next(); //不能为空 if(verify == ''){ msg = '请输入验证码'; (msg).addClass('error'); validate.verify = false; return; //异步判断验证码 $.post(APP + '/Reg/ajax_code',{verify : verify},function(status){ if(status){ msg = '通过检测'; (msg).removeClass('error'); validate.verify = true; }else{ msg = '验证码错误'; (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 = '请输入账号'; (msg).addClass('error'); validate.loginUsername = false; return; msg = ''; (msg); validate.loginUsername = true; //验证登录密码 $('input[name=pwd]',login).blur(function(){ var pwd = $(this).val(); var span = $('#login-msg'); //判断登录密码是否为空 if(pwd == ''){ msg = '请输入密码'; (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 = ''; (msg).removeClass('error'); validate.loginUsername = true; validate.loginPwd = true; }else{ msg = '用户名或密码错误'; (msg).addClass('error'); validate.loginUsername = false; validate.loginPwd = false; },'json'); msg = ''; (msg); validate.loginPwd = true;

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

JavaScript正则表达式在线测试工具:

正则表达式在线生成工具:

更多关于jQuery相关内容可查看本站专题:《》、《》、《》、《》、《》及《》

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


相关阅读