本文实例讲述了Ajax异步方式实现登录与验证的详细代码,分享给大家供大家参考。具体如下:
登录代码
这个是使用Bootstrap3的组件功能实现的
<div class="login_con_R"> <h4>登录</h4> <FORM id="loginFormId" class="form-horizontal" action="login" method="post"> <div class="form-group input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="用户名" name="username" id="j_username" value="koala"> </div> <div class="form-group input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" name="password" id="j_password" class="form-control" placeholder="密码" value="888888"/> </div> <div class="form-group input-group" style="margin-top: 45px;"> <button type="button" class="btn btn-primary btn-block" id="loginBtn">登录</button> </div> </FORM> </div>
异步登录请求的代码
<script> $(function(){ var btnLogin = $('#loginBtn'); var form = $('#loginFormId'); $('body').keydown(function(e) { if (e.keyCode == 13) { dologin(); } }); btnLogin.on('click',function() { dologin(); }); var dologin = function() { var userNameElement = $("#j_username"); var passwordElement = $("#j_password"); var username = userNameElement.val(); var password = passwordElement.val(); if (!Validation.notNull($('body'), userNameElement, username, '用户名不能为空')) { return false; } if (!Validation.notNull($('body'), passwordElement, password, '密码不能为空')) { return false; } btnLogin.attr('disabled', 'disabled').html('正在登录...'); var param = form.serialize(); $.ajax({ url: contextPath+"/login.koala", dataType: "json", data: param, type: "POST", success: function(data){ if(data.success){ $('.login_con_R').message({ type: 'success', content: '登录成功!' }); /*这里使用的异步请求,当请求登录成功的时候,重新定位到index界面*/ window.location.href=contextPath+"/index.koala"; }else{ btnLogin.removeAttr('disabled').html('登录'); $('.login_con_R').message({ type: 'error', content: data.errorMessage }); } } }); }; }); </script>
使用到的验证js代码Validation.js
Validator = { Require : {expression:/.+/,errorMsg:"该字段不能为空"}, Email : {expression:/^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,errorMsg:"Email格式不正确"}, Mobile:{expression:/^(1[3|5|8]{1}\d{9})$/,errorMsg:"手机格式不正确"}, TelePhone:{expression:/^(((0\d{2,3}-)"电话号码格式不正确"}, IdCard:{expression:/^\d{15}(\d{2}[A-Za-z0-9])"身份证号码格式不正确"}, Number:{expression:/^-"仅支持数字"}, English:{expression:/^[A-Za-z]+$/,errorMsg:"仅支持英文字符"}, Chinese:{expression:/^[\u0391-\uFFE5]+$/,errorMsg:"仅支持中文字符"}, URL:{expression:/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\"\"])*$/,errorMsg:"URL地址格式不正确"}, Regex:{errorMsg:"格式不正确"}, UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\"]*)|.{0,5})$|\s/, IsSafe : function(str){return !this.UnSafe.test(str);}, SafeString : {expression:"this.IsSafe(value)",errorMsg:"仅支持中文字符"}, ErrorItem : [document.forms[0]], ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"], Validate : function(theForm, mode){ var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for(var i=0;i<count;i++){ with(obj.elements[i]){ if(disabled)continue; var _dataType = getAttribute("dataType"); if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; this.ClearState(obj.elements[i]); if(getAttribute("require") == "false" && value == "") continue; var errorMsg = getAttribute("errorMsg")"errorMsg") : this[_dataType].errorMsg; errorMsg = errorMsg || "invalid"; var validateExpr = getAttribute("validateExpr"); validateExpr = validateExpr || this[_dataType].expression; switch(_dataType){ case "Date" : case "Repeat" : case "Range" : case "Compare" : case "Custom" : case "Group" : case "Limit" : case "LimitB" : case "SafeString" : if(!eval(validateExpr)) { this.AddError(i, errorMsg); } break; default : if(!eval(validateExpr).test(value)){ this.AddError(i, errorMsg); } break; } } } if(this.ErrorMessage.length > 1){ var content = this.ErrorMessage[1].replace(/\d+:/," "); var $element = $(this.ErrorItem[1]); var name = $element.attr('name'); if(name.indexOf('DTO') != -1){ name = name.split('.')[1]; } var $targetElement = $element; var $tempElement = $targetElement.closest('form').find('#' + name + 'ID'); if($tempElement.hasClass('select')){ $targetElement = $tempElement; } showErrorMessage($element.closest('.modal'), $targetElement, content); return false; } return true; }, limit : function(len,min, max){ min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str){ return str.replace(/[^\x00-\xff]/g,"**").length; }, ClearState : function(elem){ with(elem){ if(style.color == "red") style.color = ""; var ligertipid = getAttribute("ligertipid"); if(ligertipid && ligertipid != ""){ removeAttribute("ligertipid"); $(elem).ligerHideTip(); } } }, AddError : function(index, str){ this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec : function(op, reg){ return new RegExp(reg,"g").test(op); }, compare : function(op1,operator,op2){ switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked : function(name, min, max){ var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for(var i=groups.length-1;i>=0;i--) if(groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, IsDate : function(op, formatString){ formatString = formatString || "ymd"; var m, year, month, day; switch(formatString){ case "ymd" : m = op.match(new RegExp("^\\s*((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})\\s*$")); if(m == null ) return false; day = m[6]; month = m[5]--; year = (m[2].length == 4) "dmy" : m = op.match(new RegExp("^\\s*(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$")); if(m == null ) return false; day = m[1]; month = m[3]--; year = (m[5].length == 4) "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); function GetFullYear(y){return ((y<30 "20" : "19") + y)|0;} } }; var Validation = { notNull: function($container, $element, content, errorMessage) { if (isNull(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, email: function($container, $element, content, errorMessage) { var reg = new RegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, serialNmuber: function($container, $element, content, errorMessage) { var reg = new RegExp(/^[0-9a-zA-Z_-]*$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, number: function($container, $element, content, errorMessage) { var reg = new RegExp(/^[0-9]*$/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, humanName: function($container, $element, content, errorMessage) { var reg = new RegExp(/(^[A-Z a-z]*$)|(^[\u4e00-\u9fa5]*$)/); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; }, checkByRegExp: function($container, $element, regExp, content, errorMessage){ var reg = new RegExp(regExp); if (!reg.test(content)) { showErrorMessage($container, $element, errorMessage); return false; } return true; } }; /** * 检查是否为空 */ var isNull = function(item){ if(item == null || item == "" || item.replace(/(^\s*)|(\s*$)/g, "") == "" ){ return true; } return false; }; /** * 显示提示信息 */ var showErrorMessage = function($container, $element, content){ $element.popover({ content: content, trigger: 'manual', container: $container }).popover('show').on({ 'blur': function(){ $element.popover('destroy'); $element.parent().removeClass('has-error'); }, 'keydown': function(){ $element.popover('destroy'); $element.parent().removeClass('has-error'); } }).focus().parent().addClass('has-error'); };
希望本文所述对大家学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】