以前都说讨厌弹出窗,后来使用友好提示,但是还是很多系统的人喜欢那种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>