登入程式碼

這個是使用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*|[-_\[email protected]#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{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');
};