`

超简单实用的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>

    

0
0
分享到:
评论

相关推荐

    js验证框架

    tt.RV(正则表达式) tt.ExpV(表达式) tt.RemoteV(服务端验证) tt.SCV(选择个数) tt.DV(日期及时间) tt.NRV(数字范围) tt.LV(字符串长度) tt.CV(与其它字段或值比较) 直接通过tt.vf获取的... 验证框架的配置项

    JQuery验证框架 (实用)

    jQuery验证框架是一款非常实用的前端数据验证工具,它为开发者提供了便捷、高效的方法来确保用户在表单提交时输入的数据符合预设的规则。这个框架具有详细注释,易于理解,且经过了严格的测试,保证了其稳定性和可靠...

    jQuery验证框架

    ### jQuery验证框架详解 #### 一、概述 jQuery Validation Plugin 是一个非常强大的验证插件,它可以帮助开发者轻松地实现客户端表单验证功能。此插件是基于jQuery开发的,因此可以充分利用jQuery的强大功能来简化...

    talent validate1.6.1最新最灵活最简单的js验证框架

    4. **用户友好反馈**:框架内置了多种提示方式(如alert.html所示),能够即时向用户反馈验证结果,提升用户体验。 5. **表单过滤器**:formFilter.html展示了如何使用框架进行表单数据的过滤和清洗,确保提交到...

    talent-validate-new(验证框架)

    "talent-validate-new"是一个基于JavaScript和jQuery的开源验证框架,专为简化和优化Web表单验证而设计。这个框架提供了强大的功能,使得开发者能够快速有效地整合验证规则,确保用户输入的数据符合预设的标准。 ...

    jsvalidation验证框架的使用实用.pdf

    `jsvalidation`是一个JavaScript验证框架,它用于在前端对用户输入的数据进行实时验证,从而提高用户体验和数据质量。本文将详细介绍如何配置和使用`jsvalidation`框架。 **配置环境** 1. **部署文件**:首先,你...

    简单的验证脚本

    6. **错误提示**:当验证失败时,通常会向用户提供反馈,这可以通过`alert()`、修改DOM元素的文本或者使用更复杂的错误处理机制来实现。 7. **数值验证**:除了非空检查,我们可能还需要验证数值类型,例如检查是否...

    jquery表单注册验证框架.zip

    jQuery作为一款轻量级的JavaScript库,提供了丰富的API和插件,使得表单验证变得更加简单易行。本文将围绕“jQuery表单注册验证框架”进行深入探讨,旨在帮助开发者掌握如何利用jQuery实现高效、用户体验良好的注册...

    表单验证框架使用及说明

    //failure : function() { alert("验证失败,请检查。"); } //验证失败时调用的函数 //success : function() { callSuccessFunction() }, //验证通过时调用的函数 }); }); 验证规则是写在表单元素...

    JQuery验证框架jqBootstrapValidation.zip

    除了基础功能外,`jqBootstrapValidation`还可以与其他jQuery插件或Bootstrap组件结合使用,例如SweetAlert用于弹窗提示,或者Toastr显示非阻塞式通知。同时,通过调整CSS样式,可以进一步定制错误信息的显示效果,...

    网页 漂亮弹出提示 同alert

    在网页开发中,提示用户信息是一项常见的功能,传统的JavaScript alert、confirm 和 prompt 方法虽然简单易用,但其样式单一,无法满足现代网页设计对用户体验的需求。"网页漂亮弹出提示"正是为了解决这一问题而出现...

    jquery的validate表单验证框架

    总的来说,`jQuery Validate`是前端开发中一个非常实用的工具,它使得表单验证变得简单且高效,同时提供了丰富的定制选项,能满足各种复杂的验证需求。通过学习和掌握这个框架,开发者可以为用户提供更加友好、流畅...

    jsvalidation验证框架的使用文.pdf

    jsvalidation验证框架简化了前端数据验证的过程,通过XML配置文件,我们可以灵活地定义验证规则,同时提供了友好的错误提示。在实际项目中,可以根据需要调整配置文件和页面结构,以满足各种复杂的验证需求。使用...

    Ajax最全页面验证-基本prototype框架

    本文将深入探讨Ajax在表单验证中的应用,特别是基于Prototype框架的实现方式,以及动态验证的重要性。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信,无需刷新整个页面就能获取或更新数据。它由...

    国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架

    推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架: [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库...

    最简单的验证表单的方法

    根据给定文件的信息,我们可以总结出以下关于“最简单的验证表单的方法”的详细知识点: ### 一、背景介绍 在Web开发中,表单验证是非常重要的一环,它确保了用户提交的数据符合预期的格式与规则,从而避免了无效...

    jsvalidation验证框架的使用[归类].pdf

    6. **设置错误提示方式**:根据`show-error`属性,可以设置错误信息显示方式,例如使用`alert`弹窗或者页面上的某个`div`元素来显示错误消息。 `validation-config.xml`的结构和属性解释如下: - **validation-...

    Laravel开发-sweetalert-laravel

    在Laravel框架中,开发人员经常寻找优雅的方式来提示用户交互,比如显示通知、警告或确认信息。`SweetAlert`是一个流行的JavaScript库,它提供了一种美观的替代传统的浏览器弹窗,用于显示警报、对话框和确认消息。...

    Nope一个小巧简单快速的JS验证器

    它提供了预定义的验证规则,如非空、邮箱、电话号码等,只需简单的代码即可实现验证。 3. **快速验证**:Nope通过优化的算法实现了快速的验证过程,确保在用户输入时能及时反馈验证结果。 4. **自定义规则**:如果...

Global site tag (gtag.js) - Google Analytics