以前都说讨厌弹出窗,后来使用友好提示,但是还是很多系统的人喜欢那种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>
相关推荐
tt.RV(正则表达式) tt.ExpV(表达式) tt.RemoteV(服务端验证) tt.SCV(选择个数) tt.DV(日期及时间) tt.NRV(数字范围) tt.LV(字符串长度) tt.CV(与其它字段或值比较) 直接通过tt.vf获取的... 验证框架的配置项
jQuery验证框架是一款非常实用的前端数据验证工具,它为开发者提供了便捷、高效的方法来确保用户在表单提交时输入的数据符合预设的规则。这个框架具有详细注释,易于理解,且经过了严格的测试,保证了其稳定性和可靠...
### jQuery验证框架详解 #### 一、概述 jQuery Validation Plugin 是一个非常强大的验证插件,它可以帮助开发者轻松地实现客户端表单验证功能。此插件是基于jQuery开发的,因此可以充分利用jQuery的强大功能来简化...
4. **用户友好反馈**:框架内置了多种提示方式(如alert.html所示),能够即时向用户反馈验证结果,提升用户体验。 5. **表单过滤器**:formFilter.html展示了如何使用框架进行表单数据的过滤和清洗,确保提交到...
"talent-validate-new"是一个基于JavaScript和jQuery的开源验证框架,专为简化和优化Web表单验证而设计。这个框架提供了强大的功能,使得开发者能够快速有效地整合验证规则,确保用户输入的数据符合预设的标准。 ...
`jsvalidation`是一个JavaScript验证框架,它用于在前端对用户输入的数据进行实时验证,从而提高用户体验和数据质量。本文将详细介绍如何配置和使用`jsvalidation`框架。 **配置环境** 1. **部署文件**:首先,你...
6. **错误提示**:当验证失败时,通常会向用户提供反馈,这可以通过`alert()`、修改DOM元素的文本或者使用更复杂的错误处理机制来实现。 7. **数值验证**:除了非空检查,我们可能还需要验证数值类型,例如检查是否...
jQuery作为一款轻量级的JavaScript库,提供了丰富的API和插件,使得表单验证变得更加简单易行。本文将围绕“jQuery表单注册验证框架”进行深入探讨,旨在帮助开发者掌握如何利用jQuery实现高效、用户体验良好的注册...
//failure : function() { alert("验证失败,请检查。"); } //验证失败时调用的函数 //success : function() { callSuccessFunction() }, //验证通过时调用的函数 }); }); 验证规则是写在表单元素...
除了基础功能外,`jqBootstrapValidation`还可以与其他jQuery插件或Bootstrap组件结合使用,例如SweetAlert用于弹窗提示,或者Toastr显示非阻塞式通知。同时,通过调整CSS样式,可以进一步定制错误信息的显示效果,...
在网页开发中,提示用户信息是一项常见的功能,传统的JavaScript alert、confirm 和 prompt 方法虽然简单易用,但其样式单一,无法满足现代网页设计对用户体验的需求。"网页漂亮弹出提示"正是为了解决这一问题而出现...
总的来说,`jQuery Validate`是前端开发中一个非常实用的工具,它使得表单验证变得简单且高效,同时提供了丰富的定制选项,能满足各种复杂的验证需求。通过学习和掌握这个框架,开发者可以为用户提供更加友好、流畅...
jsvalidation验证框架简化了前端数据验证的过程,通过XML配置文件,我们可以灵活地定义验证规则,同时提供了友好的错误提示。在实际项目中,可以根据需要调整配置文件和页面结构,以满足各种复杂的验证需求。使用...
本文将深入探讨Ajax在表单验证中的应用,特别是基于Prototype框架的实现方式,以及动态验证的重要性。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信,无需刷新整个页面就能获取或更新数据。它由...
推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架: [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库...
根据给定文件的信息,我们可以总结出以下关于“最简单的验证表单的方法”的详细知识点: ### 一、背景介绍 在Web开发中,表单验证是非常重要的一环,它确保了用户提交的数据符合预期的格式与规则,从而避免了无效...
6. **设置错误提示方式**:根据`show-error`属性,可以设置错误信息显示方式,例如使用`alert`弹窗或者页面上的某个`div`元素来显示错误消息。 `validation-config.xml`的结构和属性解释如下: - **validation-...
在Laravel框架中,开发人员经常寻找优雅的方式来提示用户交互,比如显示通知、警告或确认信息。`SweetAlert`是一个流行的JavaScript库,它提供了一种美观的替代传统的浏览器弹窗,用于显示警报、对话框和确认消息。...
它提供了预定义的验证规则,如非空、邮箱、电话号码等,只需简单的代码即可实现验证。 3. **快速验证**:Nope通过优化的算法实现了快速的验证过程,确保在用户输入时能及时反馈验证结果。 4. **自定义规则**:如果...