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