Ajax異步方式實現登錄與驗證

<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>

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');
};