一个同事写的,分享给大家:
////注:用此验证框架,如要确保页面输入框的边框架样式好看。最好写个通用输入框样式如:input[type="text"] {border:solid 2px #f50;} Validator = { Require : /\s*\S+\s*/, RemarkLength : /^\s*\S{0,500}\s*$/, RegExpValidate:"this.RegExpValidate(value,accessKey)", TextLength : "this.CheckTextLength(value,accessKey)", Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, EmailOrNull : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, Birthday : /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/, BirthdayOrNull : /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/, Phone : /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/, PhoneOrNull : /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/, LocalPhone : /(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/, LocalPhoneOrNull : /(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/, Mobile : /^1(3[0-9]|8[5-9]|5[01256789])\d{8}$/, MobileOrNull : /^1(3[0-9]|8[5-9]|5[01256789])\d{8}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, UrlOrNull : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, IdCard : "this.IsIdCard(value)", IdCardOrNull : "this.IsIdCard(value)", Currency : /^\d+(\.\d+)?$/, Number : /^\d+$/, NumberOrNull : /^\d*$/, Zip : /^[1-9]\d{5}$/, ZipOrNull : /^[1-9]\d{5}$/, QQ : /^[1-9]\d{4,15}$/, QQOrNull : /^[1-9]\d{4,15}$/, Integer : /^[-\+]?\d+$/, IntegerAndNotMinus : /^[+]?\d+$/, //非负整数 IntegerOrNullAndNotMinus : /^[+]?\d*$/, //可以是空或者非负整数 IntegerOrNull : /^[-\+]?\d*$/, //可以是空或者必须是整数 Double : /^[-\+]?\d+(\.\d+)?$/, DoubleAndNotMinus : /^[+]?\d+(\.\d+)?$/, //非负整数、小数 DoubleOrNull : /^[-\+]?\d*(\.\d+)*$/, // 可以是空或者必须是整数、小数 English : /^[A-Za-z]+$/, EnglishOrNull : /^[A-Za-z]*$/, BigWord : /^[A-Z]+$/, BigWordOrNull : /^[A-Z]*$/, Chinese : /^[\u0391-\uFFE5]+$/, ChineseOrNull : /^[\u0391-\uFFE5]*$/, UnChinese : /^\w+$/,// 必填,由数字、26个英文字母或者下划线组成的字符串 UnChineseOrNull : /^\w*$/,// 必填,由数字、26个英文字母或者下划线组成的字符串 JpgImage : /(.jpg)$/, //用于验证图片扩展名的正则表达式(.jpg|.png|.gif|.ps|.jpeg) xlsFile : /(.xls)$/, Username : /^[a-z]\w{3,}$/i, UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, Year : /^[0-9]\d{3}$/, Month : "this.IsMonth(value)", IsSafe : function(str) { return !this.UnSafe.test(str); }, SafeString : "this.IsSafe(value)", Filter : "this.DoFilter(value, getAttribute('accept'))", Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", Range : "getAttribute('accesskey').split(',')[0] <= (value|0) && (value|0) <= getAttribute('accesskey').split(',')[1]", Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", Custom : "this.Exec(value, getAttribute('regexp'))", Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", ErrorItem : [document.forms[0]], CellValidator : "cellCheck(value,getAttribute('index'))", ErrorMessage : [""], //错误消息元素后缀 ErrorMsg : "ErrorMsg", //系统默认边框颜色 DefaultColor : "#00A8E6", //输入错误边框颜色 ErrorColor : "#FF3300", //输入正确边框颜色 RightColor : "#00CC00", /** 消息占位符 **/ replaceOne : "", replaceTwo : "", replaceThree : "", Validate : function(theForm) { var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for (var i = 0; i < count; i++) { with (obj.elements[i]) { var _dataClass = getAttribute("alt"); if (typeof(_dataClass) == "object" || typeof(this[_dataClass]) == "undefined"){ continue; } this.ClearState(obj.elements[i]); var titleValue = getAttribute("title"); if(titleValue == ""){ titleValue = MessageSource[_dataClass]; //如果找不到当前验证的错误消息,使用共用错误消息 if(titleValue == undefined || titleValue == ""){ titleValue = MessageSource["DefaultMsg"]; } } //可以为空验证 if(_dataClass == "BirthdayOrNull" || _dataClass == "JpgImage" || _dataClass == "EmailOrNull" || _dataClass == "BirthdayOrNull" || _dataClass == "PhoneOrNull" || _dataClass == "LocalPhoneOrNull" || _dataClass == "MobileOrNull" || _dataClass == "UrlOrNull" || _dataClass == "ZipOrNull" || _dataClass == "QQOrNull" || _dataClass == "QQOrNull"){ if(value != ""){ if (!this[_dataClass].test(value)) { this.AddError(i, titleValue); } } }else if(_dataClass == "IdCardOrNull"){ if(value != null){ if (!eval(this[_dataClass])) { this.AddError(i, titleValue); } } }else if( _dataClass == "Month"){ if (!eval(this[_dataClass])) { this.AddError(i, titleValue); } }else{ var objj = this[_dataClass]; if(objj){ if (objj.test&&!objj.test(value)) { this.AddError(i, titleValue); }else if (!eval(objj)) { if(getAttribute("title") == ""){ titleValue = titleValue.replace("%s1",this.replaceOne); titleValue = titleValue.replace("%s2",this.replaceTwo); titleValue = titleValue.replace("%s3",this.replaceThree); } this.AddError(i, titleValue); } } } } } if (this.ErrorMessage.length > 1) { var errCount = this.ErrorItem.length; for(var i=1;i<errCount;i++){ this.ErrorItem[i].style.border = "1px solid " + this.ErrorColor; var err = document.getElementById(this.ErrorItem[i].getAttribute("name") + this.ErrorMsg); if(err != null){ err.style.color = this.ErrorColor; err.innerHTML = this.ErrorMessage[i]; } } return false; } //清除替换消息 CleanReplace(); return true; }, limit : function(len, min, max) { min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str) { return str.replace(/[^\x00-\xff]/g, "**").length; }, ClearState : function(elem) { with (elem) { var borColor = "1px solid "; var err = document.getElementById(getAttribute("name") + this.ErrorMsg); if(value == ""){ //可以为空的表单数据,不输入内容边框为系统默认颜色 borColor += this.DefaultColor; if(err != null){ err.style.color = this.DefaultColor; err.innerHTML = ""; } }else{ borColor += this.RightColor; if(err != null){ err.style.color = this.RightColor; err.innerHTML = "输入正确!"; } } style.border = borColor; var lastNode = parentNode.childNodes[parentNode.childNodes.length - 1]; if (lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError : function(index, str) { this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = str; }, Exec : function(op, reg) { return new RegExp(reg, "g").test(op); }, compare : function(op1, operator, op2) { switch (operator) { case "NotEqual" : return (op1 != op2); case "GreaterThan" : return (op1 > op2); case "GreaterThanEqual" : return (op1 >= op2); case "LessThan" : return (op1 < op2); case "LessThanEqual" : return (op1 <= op2); default : return (op1 == op2); } }, MustChecked : function(name, min, max) { var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for (var i = groups.length - 1; i >= 0; i--) if (groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, DoFilter : function(input, filter) { return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter .split(/\s*,\s*/).join("|")), "gi").test(input); }, IsMonth : function(str) { if (parseInt(str) <= 12) return true; else return false; }, IsIdCard : function(number) { var date, Ai; var verify = "10x98765432"; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; var area = ['', '', '', '', '', '', '', '', '', '', '', '??', '??', '??', '??', '???', '', '', '', '', '', '??', '??', '???', '', '', '', '', '', '', '', '??', '??', '??', '??', '??', '??', '??', '', '', '', '??', '??', '??', '??', '??', '??', '', '', '', '??', '??', '??', '??', '??', '', '', '', '', '', '', '??', '??', '??', '??', '??', '', '', '', '', '', '??', '', '', '', '', '', '', '', '', '', '??', '??', '', '', '', '', '', '', '', '', '??']; var re = number .match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); if (re == null) return false; if (re[1] >= area.length || area[re[1]] == "") return false; if (re[2].length == 12) { Ai = number.substr(0, 17); date = [re[9], re[10], re[11]].join("-"); } else { Ai = number.substr(0, 6) + "19" + number.substr(6); date = ["19" + re[4], re[5], re[6]].join("-"); } if (!this.IsDate(date, "ymd")) return false; var sum = 0; for (var i = 0; i <= 16; i++) { sum += Ai.charAt(i) * Wi[i]; } Ai += verify.charAt(sum % 11); return (number.length == 15 || number.length == 18 && number == Ai); }, CheckTextLength : function(val,accessKey){ var min = "0"; var max = "500"; if(accessKey != ""){ var keyArray = accessKey.split(","); min = keyArray[0]; max = keyArray[1]; } var reg = new RegExp("^\\s*\\S{" + min + "," + max + "}\\s*$"); this.replaceOne = min; this.replaceTwo = max; //alert(reg + "test()" + val + " =" + reg.test(val)); return reg.test(val); }, RegExpValidate : function(val,accessKey){ if(accessKey != ""){ var reg = new RegExp("^" + accessKey + "$"); return reg.test(val); }else{ return false; } }, IsDate : function(op, formatString) { formatString = formatString || "ymd"; var m, year, month, day; switch (formatString) { case "ymd" : m = op .match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); if (m == null) return false; day = m[6]; month = m[5] * 1; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy" : m = op .match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); if (m == null) return false; day = m[1]; month = m[3] * 1; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } if (!parseInt(month)) return false; month = month == 0 ? 12 : month; var date = new Date(year, month - 1, day); return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth() + 1) && day == date.getDate()); function GetFullYear(y) { return ((y < 30 ? "20" : "19") + y) | 0; } }, CleanReplace : function() { this.replaceOne = ""; this.replaceTwo = ""; this.replaceThree = ""; } } MessageSource = { DefaultMsg : "请输入有效值.", Require : "请输入值.", RemarkLength : "备注长度必须为0-500个字符.", TextLength : "输入值的长度应该在 %s1 至 %s2 之间.", Email : "请输入正确的邮箱(Email).", EmailOrNull : "请输入正确的邮箱(Email).", Birthday : "请输入正确的生日.", BirthdayOrNull : "请输入正确的生日.", Phone : "请输入正确的电话号码,如010-29898989.", PhoneOrNull : "请输入正确的电话号码,如010-29898989.", LocalPhone : "请输入正确的电话号码,如010-29898989.", LocalPhoneOrNull : "请输入正确的电话号码,如010-29898989.", Mobile : "请输入正确的手机号码.", MobileOrNull : "请输入正确的手机号码.", Url : "请输入正确的链接(URL).", UrlOrNull : "请输入正确的链接(URL).", IdCard : "请输入正确的身份证号码.", IdCardOrNull : "请输入正确的身份证号码.", Currency : "请输入正确的值.", Number : "请输入正确的数字.", NumberOrNull : "请输入正确的数字.", Zip : "请输入正确的邮政编码.", ZipOrNull : "请输入正确的邮政编码.", QQ : "请输入正确的QQ号码.", QQOrNull : "请输入正确的QQ号码.", Integer : "请输入正确的整数.", IntegerAndNotMinus : "请输入大于0的整数.", //非负整数 IntegerOrNullAndNotMinus : "请输入大于0的整数.", //可以是空或者非负整数 IntegerOrNull : "请输入正确的整数.", //可以是空或者必须是整数 Double : "请输入正确的整数或小数.", DoubleAndNotMinus : "请输入大于0的整数或小数.", //非负整数、小数 DoubleOrNull : "请输入正确的整数或小数.", // 可以是空或者必须是整数、小数 English : "请输入正确的字母.", EnglishOrNull : "请输入正确的字母.", BigWord : "请输入正确的大写字母.", BigWordOrNull : "请输入正确的大写字母.", Chinese : "请输入正确的汉字.", ChineseOrNull : "请输入正确的汉字.", UnChinese : "请输入正确的由数字、26个英文字母或者下划线组成的字符.",// 必填,由数字、26个英文字母或者下划线组成的字符串 UnChineseOrNull : "请输入正确的由数字、26个英文字母或者下划线组成的字符.",// 必填,由数字、26个英文字母或者下划线组成的字符串 JpgImage : "图片格式不正确.", //用于验证图片扩展名的正则表达式(.jpg|.png|.gif|.ps|.jpeg) xlsFile : "文件格式不正确.", Username : "请输入正确有用户名.", UnSafe : "请输入正确的值.", Year : "请输入正确的年份.", Month : "请输入正确的月份." }
相关推荐
JavaScript验证框架如jQuery Validation、Validator.js、Formik等,都是实现上述功能的实例。它们不仅提供了基本的验证功能,还具有丰富的社区插件和定制选项,使得开发复杂的验证场景变得更加便捷。了解并掌握这些...
这个强大的验证框架允许开发者以灵活、可扩展的方式对用户提交的数据进行实时检查,从而提升用户体验并减少服务器端的压力。 `js validate`框架的核心功能包括: 1. **基本验证规则**:框架内置了多种常见的验证...
JavaScript验证框架在Web应用开发中扮演着至关重要的角色,它能确保用户在提交表单时输入的数据符合预设的规则,从而减少服务器端的压力并提供更好的用户体验。"js验证框架(eclipse)"是一个专为Eclipse集成开发环境...
JavaScript验证框架是前端开发中不可或缺的一部分,主要用于在用户提交数据前进行实时的客户端验证,以提高用户体验并减轻服务器端的压力。本示例将探讨如何利用Js验证框架进行有效的数据校验,以`validate.js`为例...
JavaScript验证框架是前端开发中常用的一种工具,用于在用户提交数据前进行客户端验证,提高用户体验并减轻服务器压力。本文将详细介绍Js验证框架的基本概念、核心功能、API文档以及使用示例。 一、基本概念 Js验证...
JavaScript验证框架是Web开发中不可或缺的一部分,用于在客户端对用户输入的数据进行实时验证,从而提高用户体验并减轻服务器端的压力。本篇文章将深入探讨JS验证框架的使用方法,以帮助开发者更好地理解和应用这些...
"气泡javascript验证框架"是一个专注于用户体验的验证解决方案,它通过修改`validate.js`库,将原本的验证提示改为了气泡样式,使得用户交互更加直观且友好。 `validate.js`是一个轻量级的JavaScript表单验证框架,...
在这个场景中,我们讨论的是一个名为"caChecker1_0_2"的JavaScript验证框架,它专用于表单验证。这个框架的亮点在于其便捷性——只需注入需要验证的表单元素ID,即可实现高效、灵活的验证功能。 表单验证是网页开发...
**易用又灵活的js验证框架** 在网页开发中,数据验证是不可或缺的一环,它确保用户输入的数据符合预设的规则,防止错误信息的传递和处理。js验证框架为开发者提供了一种高效且易于定制的解决方案。本文将详细介绍一...
1. **JavaScript验证框架**:这种框架通常用于在前端进行表单验证,确保用户输入的数据符合特定的格式和规则,如邮箱地址、电话号码、密码强度等,避免无效数据提交服务器。 2. **按需加载**:这是一种优化策略,只...
JavaScript验证框架是前端开发中必不可少的一部分,用于在用户提交数据前进行实时的输入验证,确保数据的完整性和正确性,从而提高用户体验并减轻后端服务器的负担。在更新JavaScript验证框架时,我们需要关注其功能...
**标题解析:**“mvc模式的javascript验证框架” 在软件开发中,MVC(Model-View-Controller)模式是一种常用的设计模式,它将应用程序的数据模型、用户界面和控制逻辑分离,提高了代码的可维护性和可扩展性。在这...
标题中的“简易的表单js验证框架”指的是一个JavaScript库,专门用于简化和优化网页上的表单验证过程。在Web开发中,表单验证是必不可少的一环,它确保用户输入的数据符合预设的规则,例如邮箱格式正确、密码强度...
本文将详细讨论“fckeditor”和“js验证框架”的应用及其相关知识点。 首先,我们来了解一下“fckeditor”。FCKeditor(现已更名为CKEditor)是一款开源的JavaScript富文本编辑器,它允许用户在网页上进行类似于...
**基于jQuery 1.9.1的JS验证框架详解** 在Web开发中,表单验证是必不可少的一个环节,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。基于jQuery 1.9.1的JS验证框架正是为了解决这一问题而...
**jQuery Validator JS验证框架** jQuery Validator是一个强大的JavaScript库,它为HTML表单提供了方便而灵活的验证功能。这个框架基于jQuery库,使得在网页中实现客户端验证变得简单易行。通过使用jQuery ...