jquery登錄的異步驗(yàn)證操作示例
本文實(shí)例講述了jquery登錄的異步驗(yàn)證操作。分享給大家供大家參考,具體如下:
//定義一個(gè)json var validate = { username : false, pwd : false, pwded : false, verify : false, loginUsername : false, loginPwd :false } //存儲(chǔ)錯(cuò)誤信息 var $msg = ""; //驗(yàn)證注冊(cè)表單 $(function(){ //獲取表單對(duì)象 var register = $('form[name=register'); register.submit(function(){ var isOK = validate.username && validate.pwd && validate.pwded && validate.verify; if(isOK){ return true; } //點(diǎn)擊提交按鈕依次觸發(fā)失去焦點(diǎn)再次驗(yàn)證 $('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; }); //驗(yàn)證用戶名 $('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個(gè)字符,字母,數(shù)字,下劃線'; span.html(msg).addClass('error'); validate.username = false; return; } //異步驗(yàn)證用戶名是否存在 $.post(APP + '/Reg/ajax_username',{username : username},function(status){ console.log(status); if(status){ msg = '通過(guò)檢測(cè)'; span.html(msg).removeClass('error'); validate.username = true; }else{ msg = '用戶名已經(jīng)存在'; span.html(msg).addClass('error'); validate.username = false; } },'json'); }); //驗(yàn)證密碼 $('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; } //正則驗(yàn)證 if(!/^\w{6,20}$/g.test(pwd)){ msg = '密碼必須由6-20個(gè)字母,數(shù)字,或者下劃線組成'; span.html(msg).addClass('error'); validate.pwd = false; return; } msg = '通過(guò)檢測(cè)'; span.html(msg).removeClass('error'); validate.pwd = true; }); //確認(rèn)密碼 $('input[name=pwded]',register).blur(function(){ var pwded = $(this).val(); var span = $(this).next(); //確認(rèn)密碼 if(pwded == ''){ msg = '請(qǐng)確認(rèn)密碼'; 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 = '通過(guò)檢測(cè)'; span.html(msg).removeClass('error'); validate.pwded = true; }); //驗(yàn)證驗(yàn)證碼 $('input[name=verify]',register).blur(function(){ var verify = $(this).val(); var span = $(this).next().next(); //不能為空 if(verify == ''){ msg = '請(qǐng)輸入驗(yàn)證碼'; span.html(msg).addClass('error'); validate.verify = false; return; } //異步判斷驗(yàn)證碼 $.post(APP + '/Reg/ajax_code',{verify : verify},function(status){ if(status){ msg = '通過(guò)檢測(cè)'; span.html(msg).removeClass('error'); validate.verify = true; }else{ msg = '驗(yàn)證碼錯(cuò)誤'; span.html(msg).addClass('error'); validate.verify = false; return; } },'json'); }); //登錄form表單驗(yàn)證 var login = $('form[name=login]'); //登錄提交事件 login.submit(function(){ if(validate.loginUsername && validate.loginPwd){ return true; } //依次觸發(fā)失去焦點(diǎn)動(dòng)作 $('input[name=username]',login).trigger('blur'); $('input[name=pwd',login).trigger('blur'); return false; }); //驗(yàn)證登錄用戶名 $('input[name=username]',login).blur(function(){ var username = $(this).val(); var span = $('#login-msg'); //判斷是否為空 if(username == ''){ msg = '請(qǐng)輸入賬號(hào)'; span.html(msg).addClass('error'); validate.loginUsername = false; return; } msg = ''; span.html(msg); validate.loginUsername = true; }); //驗(yàn)證登錄密碼 $('input[name=pwd]',login).blur(function(){ var pwd = $(this).val(); var span = $('#login-msg'); //判斷登錄密碼是否為空 if(pwd == ''){ msg = '請(qǐng)輸入密碼'; span.html(msg).addClass('error'); validate.loginPwd = false; return; } var data = { username : $('input[name=username]',login).val(), pwd : pwd }; //異步驗(yàn)證 $.post(APP + '/Login/ajax_login',data,function(status){ if(status){ msg = ''; span.html(msg).removeClass('error'); validate.loginUsername = true; validate.loginPwd = true; }else{ msg = '用戶名或密碼錯(cuò)誤'; span.html(msg).addClass('error'); validate.loginUsername = false; validate.loginPwd = false; } },'json'); msg = ''; span.html(msg); validate.loginPwd = true; }); })
PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:
JavaScript正則表達(dá)式在線測(cè)試工具:
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題:《jQuery正則表達(dá)式用法總結(jié)》、《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面
- 使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
- S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼
- ASP.NET jQuery 實(shí)例11 通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶登錄頁(yè)面驗(yàn)證功能
- jQuery.ajax 用戶登錄驗(yàn)證代碼
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)驗(yàn)證用戶登錄
相關(guān)文章
jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
JQuery對(duì)數(shù)組的處理非常便捷并且功能強(qiáng)大齊全,一步到位的封裝了很多原生js數(shù)組不能企及的功能。下面來(lái)看看JQuery數(shù)組的強(qiáng)大之處在哪。2014-03-03jquery滾動(dòng)加載數(shù)據(jù)的方法
這篇文章主要介紹了jquery滾動(dòng)加載數(shù)據(jù)的方法,實(shí)例分析了jQuery動(dòng)態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。2010-12-12jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法,但是還沒(méi)有看見(jiàn)用jQuery寫的,效果實(shí)現(xiàn)很簡(jiǎn)單,確切的說(shuō)是用jquery實(shí)現(xiàn)這個(gè)效果很簡(jiǎn)單,這就是jquery的強(qiáng)大和魅力所在。2011-04-04目前流行的JavaScript庫(kù)的介紹及對(duì)比
為了簡(jiǎn)化JavaScript的開發(fā),一些JavaScript程序庫(kù)誕生了,下面是目前集中流行的JavaScript程序庫(kù)的介紹和對(duì)比,感興趣的朋友可以了解下2013-09-09底部懸浮通欄可以關(guān)閉廣告位的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇底部懸浮通欄可以關(guān)閉廣告位的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06Jquery 基礎(chǔ)學(xué)習(xí)筆記之文檔處理
本節(jié)讓我們繼續(xù)Jquery知識(shí)的了解:文檔處理。文檔處理主要是對(duì)HTML元素進(jìn)行一些增操作,刪除操作,復(fù)制操作,替換操作。2009-05-05