jquery登录的异步验证
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 | //定义一个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; }); }) |
分类:
前端技术
标签:
JavaScript
, Jquery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战