`
tangxininjava
  • 浏览: 96656 次
  • 性别: Icon_minigender_1
  • 来自: 遂宁
社区版块
存档分类
最新评论

js验证框架

    博客分类:
  • J2EE
 
阅读更多

一个同事写的,分享给大家:

////注:用此验证框架,如要确保页面输入框的边框架样式好看。最好写个通用输入框样式如: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验证框架

    JavaScript验证框架如jQuery Validation、Validator.js、Formik等,都是实现上述功能的实例。它们不仅提供了基本的验证功能,还具有丰富的社区插件和定制选项,使得开发复杂的验证场景变得更加便捷。了解并掌握这些...

    js validate 非常强大的js验证框架

    这个强大的验证框架允许开发者以灵活、可扩展的方式对用户提交的数据进行实时检查,从而提升用户体验并减少服务器端的压力。 `js validate`框架的核心功能包括: 1. **基本验证规则**:框架内置了多种常见的验证...

    js验证框架(eclipse)

    JavaScript验证框架在Web应用开发中扮演着至关重要的角色,它能确保用户在提交表单时输入的数据符合预设的规则,从而减少服务器端的压力并提供更好的用户体验。"js验证框架(eclipse)"是一个专为Eclipse集成开发环境...

    Js验证框架使用示例

    JavaScript验证框架是前端开发中不可或缺的一部分,主要用于在用户提交数据前进行实时的客户端验证,以提高用户体验并减轻服务器端的压力。本示例将探讨如何利用Js验证框架进行有效的数据校验,以`validate.js`为例...

    Js验证框架帮助API文档和示例

    JavaScript验证框架是前端开发中常用的一种工具,用于在用户提交数据前进行客户端验证,提高用户体验并减轻服务器压力。本文将详细介绍Js验证框架的基本概念、核心功能、API文档以及使用示例。 一、基本概念 Js验证...

    JS验证框架的使用方法

    JavaScript验证框架是Web开发中不可或缺的一部分,用于在客户端对用户输入的数据进行实时验证,从而提高用户体验并减轻服务器端的压力。本篇文章将深入探讨JS验证框架的使用方法,以帮助开发者更好地理解和应用这些...

    气泡javascript验证框架

    "气泡javascript验证框架"是一个专注于用户体验的验证解决方案,它通过修改`validate.js`库,将原本的验证提示改为了气泡样式,使得用户交互更加直观且友好。 `validate.js`是一个轻量级的JavaScript表单验证框架,...

    js 验证框架(caChecker1_0_2) 验证表单 只需要注入需要验证的id即可

    在这个场景中,我们讨论的是一个名为"caChecker1_0_2"的JavaScript验证框架,它专用于表单验证。这个框架的亮点在于其便捷性——只需注入需要验证的表单元素ID,即可实现高效、灵活的验证功能。 表单验证是网页开发...

    易用又灵活的js验证框架

    **易用又灵活的js验证框架** 在网页开发中,数据验证是不可或缺的一环,它确保用户输入的数据符合预设的规则,防止错误信息的传递和处理。js验证框架为开发者提供了一种高效且易于定制的解决方案。本文将详细介绍一...

    发布一个本人开发的一个js验证框架

    1. **JavaScript验证框架**:这种框架通常用于在前端进行表单验证,确保用户输入的数据符合特定的格式和规则,如邮箱地址、电话号码、密码强度等,避免无效数据提交服务器。 2. **按需加载**:这是一种优化策略,只...

    更新一下js验证框架

    JavaScript验证框架是前端开发中必不可少的一部分,用于在用户提交数据前进行实时的输入验证,确保数据的完整性和正确性,从而提高用户体验并减轻后端服务器的负担。在更新JavaScript验证框架时,我们需要关注其功能...

    mvc模式的javascript验证框架

    **标题解析:**“mvc模式的javascript验证框架” 在软件开发中,MVC(Model-View-Controller)模式是一种常用的设计模式,它将应用程序的数据模型、用户界面和控制逻辑分离,提高了代码的可维护性和可扩展性。在这...

    简易的表单js验证框架,解决复杂的页面验证过程

    标题中的“简易的表单js验证框架”指的是一个JavaScript库,专门用于简化和优化网页上的表单验证过程。在Web开发中,表单验证是必不可少的一环,它确保用户输入的数据符合预设的规则,例如邮箱格式正确、密码强度...

    fckeditor 和js验证框架 压缩包

    本文将详细讨论“fckeditor”和“js验证框架”的应用及其相关知识点。 首先,我们来了解一下“fckeditor”。FCKeditor(现已更名为CKEditor)是一款开源的JavaScript富文本编辑器,它允许用户在网页上进行类似于...

    基于jquery1.9.1的JS验证框架(较文档)

    **基于jQuery 1.9.1的JS验证框架详解** 在Web开发中,表单验证是必不可少的一个环节,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。基于jQuery 1.9.1的JS验证框架正是为了解决这一问题而...

    jquery validator js验证框架

    **jQuery Validator JS验证框架** jQuery Validator是一个强大的JavaScript库,它为HTML表单提供了方便而灵活的验证功能。这个框架基于jQuery库,使得在网页中实现客户端验证变得简单易行。通过使用jQuery ...

Global site tag (gtag.js) - Google Analytics