本文实例讲述了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}-)?\\d{7,8}(-\\d{4})?))$/,errorMsg:\"电话号码格式不正确\"}, IdCard:{expression:/^\\d{15}(\\d{2}[A-Za-z0-9])?$/,errorMsg:\"身份证号码格式不正确\"}, Number:{expression:/^-?(\\d+|[1-9]\\d*\\.\\d+|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$/,errorMsg:\"仅支持数字\"}, 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\")? getAttribute(\"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) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case \"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) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } var date = new Date(year, month, day); return (typeof(date) == \"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\'); };
希望本文所述对大家学习有所帮助。
本文地址:https://www.stayed.cn/item/24892
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我