以前都说讨厌弹出窗,后来使用友好提示,但是还是很多系统的人喜欢那种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获取的... 验证框架的配置项
//failure : function() { alert("验证失败,请检查。"); } //验证失败时调用的函数 //success : function() { callSuccessFunction() }, //验证通过时调用的函数 }); }); 验证规则是写在表单元素...
推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架: [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库...
├── css/(css文件夹,包含框架主要css及示例、插件的css文件) ├── docs/(开发文档) ├── fonts/(字体图标,包含FontAwesome字体图标和Bootstrap自带的Glyphicons字体图标) ├── img/(图片) ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
hash_check() 验证表单Hash值 getFileExt() 获取文件后缀 getFileName() 获取文件名称 compress_html() HTML代码压缩 ob_gzip() GZIP压缩 is_ip() 检测IP地址是否正确 is_url() 检测URL是否正确 is_email() 检测邮箱...
3,仿百度搜索智能提示,自动补全; 4,多功能组合框的应用,既能输入又能下拉还能拼音检索; 5,非常美观,功能强大的表单验证组件; 6,Excel的导入导出; 7,新一代javaee框架apache mvc的使用; 8,自定义艺术型...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
它使用服务层框架可以将JavaBeans从Jsp/Servlet中分离出来,而使用表现层框架则可以将Jsp中剩余的JavaBeans完全分离,这部分JavaBeans主要负责显示相关信息,一般是通过标签库(Taglib)实现,不同框架有不同自己的...
自己写的一个网页开发常用效果库与框架库,可以自定义导出自己想要的部分。 ... ... 内容包含如下: A:效果库类;...3.require-实现模块化开发,简单实用; 提示:用!!!!!!标注结尾的在某些场景下可能出现bug;
layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , icon: 6 // icon , yes: ...
3.2.2 Ext.MessageBox.alert() 3.2.3 Ext.MessageBox.confirm() 3.2.4 Ext.MessageBox.prompt() 3.2.5 Ext.MessageBox.wait() 3.2.6 Ext.MessageBox.show() 3.2.7 Ext.window.MessageBox的其他功能 ...
13.3 处理窗口事件或框架事件 13.3.1 onLoad和onUnLoad事件 13.3.2 onFocus和onBlur事件函数 13.3.3 onResize事件处理函数 13.4 鼠标事件处理 13.4.1 怎样使用鼠标事件 13.4.2 ...
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
7.4.5 数据验证及错误处理:ext.data.validations与ext.data.errors / 332 7.4.6 模型的关系:ext.data.association、ext.data.hasmanyassociation和ext.data.belongstoassociation / 334 7.4.7 管理数据模型:...
3.19 节创建和控制Alert 3.20 节根据呼出组件设置对话框的尺寸和位置 3.21 节管理多个弹出对话框 3.22 节在容器中滚动到某个指定的子组件 3.23 节使用IdeferredInstance 创建模板 3.24 节手动布局容器 3.25 节测量并...
13.3.1.1 提示进度 92 13.3.1.2 INVITE请求转发 93 13.3.1.3 INVITE请求的拒绝 93 13.3.1.4 接受INVITE请求 93 14 更改已经存在的会话 94 14.1 UAC行为 95 14.2 UAS行为 96 15 结束一个会话 98 15.1 使用BYE请求终止...