超简单实用的alert验证提示框架

     以前都说讨厌弹出窗，后来使用友好提示，但是还是很多系统的人喜欢那种alert的感觉。

    于是很多表单开始使用alert了。。

     

    通用的核心代码是：

    

validator = {

        init: function (options) {

            this.validators = (options && options.validators) || [];
            this.errorList = [];
            this.enableShowErr = (options && options.enableShowErr) || false;
            this.errorIds = [];//错误控件id
        },

        validate: function () {
            return true;
        },

        add: function (fValidator) {
            this.validators = this.validators || [];
            this.validators.push(fValidator);
        },

        validateAll: function () {
            var validators = this.validators || [];
            var self = this;
            this.errorList = [];//清空錯誤信息
			this.errorIds = [];//清空錯誤id

            $.each(validators, function (i, fValidator) {
                fValidator.call(self);
            });

            if (this.enableShowErr) {
                this.showError();
				$("#"+validator.errorIds[0]).focus();//聚焦到错误的第一个来源
            }
            return this.isValid();
        },

        showError: function () {
            if (!this.isValid()) {
                var errmsg = [];
                $.each(this.errorList, function (i, error) {
                    if (error.isAlert === true) {
                        errmsg.push((i + 1) + ') ' + error.msg)
                    }
                });

                if (errmsg.length > 0) {
                    alert(errmsg.join('\n'));
                }

            }
        },

        addError: function (errMsg,id, isAlert) {
            isAlert = (isAlert == undefined ? true : isAlert)
            this.errorIds = this.errorIds || [];//this.errorIds = this.errorList || [];
            this.errorList = this.errorList || [];
            var error = {
                msg: errMsg,
                isAlert: isAlert
            }
            this.errorIds.push(id);
            this.errorList.push(error);
        },

        isValid: function () {
            return (this.errorList.length == 0);
        },

        isNumber: function (str) {
            var reg = /\D/;
            return !reg.test(str);
        },

    };
    //开启验证框架
    validator.init({
        enableShowErr: true
    });

    这样的话可以一词性把，错误信息添加到一个地方，然后一次弹出。同时还支持自定义的一些方法

    

    列子：

    页面：

    

     

<script language="javascript">
	//required field
	var requiredInputNames = 
	[
		"EnglishSurName"
		,"EnglishGivenName"
		,"EmailAddress"
		,"HomeTel"
		,"DistID"
		//,"DistIDNO"
		,"BirthDay"
		,"PickUpCtr"
		
	];
	//required field name for alert
	var msgs = 
	[
		"英文姓氏"
		,"英文名稱"
		,"電郵地址"
		,"聯絡電話號碼"
		,"身份證號碼"
		//,"身份證檢碼"
		,"生日"
		,"購貨中心進行付款及登記"
	];


	$(document).ready(function() {
		//jquery-ui datepicker
		$( "#BirthDay" ).datepicker({
			dateFormat:"yy-mm-dd"
			,changeYear: true
			,changeMonth: true
			,yearRange: "c-80:c"
			,maxDate: "-18y"
		});
		$( "#SpouseBirthDay" ).datepicker({
			dateFormat:"yy-mm-dd"
			,changeYear: true
			,changeMonth: true
			,yearRange: "c-80:c"
			,maxDate: "-18y"
		});
		//set sex
		$( "#Sex" ).bind("change",signUpSexChange);
		$( "#Sex" ).trigger("change");

		//validate required
		validateRequired({
			reqInputIds: requiredInputNames,
			AlertMsgS : msgs
		});

		//validate one of required
		validateOneOfRequired({
			requiredObjsOp:[{
				reqIds: ["EnglishAddress","ChineseAddress"],//focus 第一個控件
				AlertMsgS: "中文或英文之住宅地址!"
			},{
				reqIds: ["EnglishDeliveryAddress","ChineseDeliveryAddress"],
				AlertMsgS: "中文或英文之送貨地址!"
			}]
		}
		);


		//validate HK ID 
		validator.add(function(){
			//是否需要分開驗證
			var patternHKID = new RegExp("^[A-Z]{1,2}[0-9]{6}\\(?[0-9A]\\)?$");
			var distID = $("#DistID").val();
			var distIDNO = $("#DistIDNO").val();
	    	var distHKID = distID.concat("("+distIDNO+")");
			var isPass = patternHKID.test(distHKID);
			if(!isPass && $.trim(distID)){ //if distID not null then valiate
	    		this.addError(jQuery.i18n.prop('ERROR_FIELD_FORMAT',"身份證號碼"),"DistID");
			}else{
				//設置值到隱藏的文本域提交到後臺
				$("#DistHKIDNO").val(distHKID);
			}
			var spouseID = $("#SpouseID").val();
			var spouseNO,spouseHKID;
			if($.trim(spouseID)){
				 spouseNO = $("#SpouseIDNO").val();
				 spouseHKID = spouseID.concat("("+spouseNO+")");
				 var ps = patternHKID.test(spouseHKID);
				 if(!ps){
					this.addError(jQuery.i18n.prop('ERROR_FIELD_FORMAT',"配偶身份證號碼"),"SpouseID");
				 }else{
					$("#SpouseHKIDNO").val(spouseHKID);
				 }
			
			}
    	});
		//validate email format
		validator.add(function(){
			var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
			var email = $("#EmailAddress").val();
			var spEmail = $("#SpouseEmailAddress").val();
			if ($.trim(email)) {
				if (reg.test(email) == false) {
					this.addError(jQuery.i18n.prop('ERR_EMAIL_FORMAT'),"EmailAddress");
				}
			}
			if($.trim(spEmail)){
				if(reg.test(spEmail)== false){
					this.addError(jQuery.i18n.prop('ERR_EMAIL_FORMAT'),"SpouseEmailAddress");
				}
			}

		});
		//validate Telephone no. format
		validator.add(function(){
			var homeTel = $("#HomeTel").val();
			var dayTel = $("#DayTel").val();
			var spouseTel = $("#SpouseTel").val();
			if($.trim(homeTel) && !this.isNumber(homeTel)){
				this.addError(jQuery.i18n.prop('ERROR_FIELD_FORMAT',"住宅電話"),"HomeTel");
			}
			if($.trim(dayTel) && !this.isNumber(dayTel)){
				this.addError(jQuery.i18n.prop('ERROR_FIELD_FORMAT',"日間聯絡電話"),"DayTel");
			}
			if($.trim(spouseTel) && !this.isNumber(spouseTel)){
				this.addError(jQuery.i18n.prop('ERROR_FIELD_FORMAT',"配偶電話"),"SpouseTel");
			}
			
		});

		//关闭验证
		//validator.init({
		//	enableShowErr: false
		//});
		
	});

</script>