最近项目中写的几个JS文件,希望有用(原创)
/** Cookie **/
//定义全局变量Cookie
//eg:Cookie.setCookie('user','jack',{expireDays:1,expireHours:20,path:"/"}
var Cookie={//默认以秒为单位
setCookie:function(name,value,option){
var str=name+"="+escape(value);
if (option){
var ms=0;
if (option.expireDays) { try { ms+=option.expireDays*24*3600*1000;}catch(e){}}//天数
if (option.expireHours) { try { ms+=option.expireHours*3600*1000;} catch(e){}}//小时
if (option.expireMinutes) { try { ms+=option.expireMinutes*60*1000;}catch(e){}}//分钟
if (option.expireSeconds) { try { ms+=option.expireSeconds*1000;} catch(e){}}//秒钟
if (ms==0) { try { ms=option*1000;} catch(e){}}//默认以秒为单位传入时间
if (ms!=0){
var date=new Date();
date.setTime(date.getTime()+ms);
str+="; expires="+date.toGMTString();
}
if (option.path) str+="; path="+path;
if (option.domain) str+="; domain="+domain;
if (option.secure) str+="; true";
}
document.cookie=str;
},
getCookie:function(name)
{
var cookieArray=document.cookie.split("; ");
var cookie=new Object();
for (var i=0;i<cookieArray.length;i++) {
var arr=cookieArray[i].split("=");
if (arr[0]==name) return unescape(arr[1]);
}
return "";
},
deleteCookie:function(name){
this.setCookie(name,"",{expireDays:-1});
}
}//COOKIE
//定义全局变量Cookie
//eg:Cookie.setCookie('user','jack',{expireDays:1,expireHours:20,path:"/"}
var Cookie={//默认以秒为单位
setCookie:function(name,value,option){
var str=name+"="+escape(value);
if (option){
var ms=0;
if (option.expireDays) { try { ms+=option.expireDays*24*3600*1000;}catch(e){}}//天数
if (option.expireHours) { try { ms+=option.expireHours*3600*1000;} catch(e){}}//小时
if (option.expireMinutes) { try { ms+=option.expireMinutes*60*1000;}catch(e){}}//分钟
if (option.expireSeconds) { try { ms+=option.expireSeconds*1000;} catch(e){}}//秒钟
if (ms==0) { try { ms=option*1000;} catch(e){}}//默认以秒为单位传入时间
if (ms!=0){
var date=new Date();
date.setTime(date.getTime()+ms);
str+="; expires="+date.toGMTString();
}
if (option.path) str+="; path="+path;
if (option.domain) str+="; domain="+domain;
if (option.secure) str+="; true";
}
document.cookie=str;
},
getCookie:function(name)
{
var cookieArray=document.cookie.split("; ");
var cookie=new Object();
for (var i=0;i<cookieArray.length;i++) {
var arr=cookieArray[i].split("=");
if (arr[0]==name) return unescape(arr[1]);
}
return "";
},
deleteCookie:function(name){
this.setCookie(name,"",{expireDays:-1});
}
}//COOKIE
//功能介绍:ToolTips
//代码文件:tooltip.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype.js库
/* tooltip.js - Small tooltip library on top of Prototype
*
* Usage:
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
* <script type="text/javascript">
* var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
* </script>
*
* Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
* be shown. On o mouseOut the tooltip disappears.
*
* Example:
*
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
*
* <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
* Detail infos on product 1.<br />
* </div>
*
* <div id='product_1'>
* This is product 1
* </div>
* 以下代码应该放在所有的element定义之后,一般放置在页面的底部。
* <script type="text/javascript">
* var my_tooltip = new Tooltip('product_1', 'tooltip');//使用默认的CSS,将忽略自定义的CSS
* var my_tooltip = new Tooltip('product_1', 'tooltip',false);//使用自定义的CSS
* </script>
*
* You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
*/
//需要使用prototype.js文件
var Tooltip = Class.create();
Tooltip.prototype = {
version:'1.0.0',//版本
//default_css:true,
style:{
marging:"0px",
padding:"5px 8px 3px 8px",
backgroundColor:"#FFFFFF",//"#d6d6fc",
color:"#349045",
borderWidth:"1px",
borderStyle:"solid",
borderColor:"gray",
filter:"progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)"
},
initialize: function(element, tool_tip) {
this.initialize(element,tool_tip,true);
},
initialize: function(element, tool_tip,default_css) {
if (default_css==false) {
this.default_css=false;
}else {
this.default_css=true;
}
var options = Object.extend({
delta_x: 5,
delta_y: 5,
zindex: 1000//足够大的数,使层能够显示在最前面
}, arguments[1] || {});
this.element = $(element);
this.tool_tip = $(tool_tip);
this.options = options;
this.tool_tip.hide(); // hide the tool-tip by default
this.eventMouseOver = this.showTooltip.bindAsEventListener(this);//绑定事件处理程序
this.eventMouseOut = this.hideTooltip.bindAsEventListener(this);
this.registerEvents();
},
destroy: function() {//解除事件处理
Event.stopObserving(this.element, "mouseover", this.eventMouseOver);//停止对事件的观察(监听)
Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
},
registerEvents: function() {//注册事件处理
Event.observe(this.element, "mouseover", this.eventMouseOver);
Event.observe(this.element, "mouseout", this.eventMouseOut);
},
showTooltip: function(event){
Event.stop(event);
// get Mouse position
var mouse_x = Event.pointerX(event);
var mouse_y = Event.pointerY(event);
// decide if wee need to switch sides for the tooltip
var dimensions = Element.getDimensions( this.tool_tip );
var element_width = dimensions.width;
var element_height = dimensions.height;
if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) ){ // too big for X
mouse_x = mouse_x - element_width;
// apply delta to make sure that the mouse is not on the tool-tip
mouse_x = mouse_x - this.options.delta_x;
} else {
mouse_x = mouse_x + this.options.delta_x;
}
if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) ){ // too big for Y
mouse_y = mouse_y - element_height;
// apply delta to make sure that the mouse is not on the tool-tip
mouse_y = mouse_y - this.options.delta_y;
} else {
mouse_y = mouse_y + this.options.delta_y;
}
// now set the right styles
this.setStyles(mouse_x, mouse_y);
// finally show the Tooltip
//new Effect.Appear(this.tool_tip);
new Element.show(this.tool_tip);
},
setStyles: function(x, y){
// set the right styles to position the tool tip
Element.setStyle(this.tool_tip, { position:'absolute',
top:y + "px",
left:x + "px",
zindex:this.options.zindex
});
// apply default theme if wanted
if (this.default_css==true){//应用缺省的css
Element.setStyle(this.tool_tip, this.style);
}
},
hideTooltip: function(event){
//new Effect.Fade(this.tool_tip);
new Element.hide(this.tool_tip);
},
getWindowHeight: function(){
var innerHeight;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerHeight = document.body.clientHeight;
} else {
innerHeight = window.innerHeight;
}
return innerHeight;
},
getWindowWidth: function(){
var innerWidth;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerWidth = document.body.clientWidth;
} else {
innerWidth = window.innerWidth;
}
return innerWidth;
}
}
/*
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/prototype.js" language="javascript" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id='tooltip1' style="display:none; margin: 5px; background-color: red;">
<h1>HOTDON</h1>
Detail infos on product 1.<br />
Detail infos on product 1.<br />
</div>
<div id='tooltip2' style="display:none; margin: 5px; background-color: red;">
<h1>INFO</h1>
Detail infos on product 1.<br />
Detail infos on product 1.<br />
</div>
<a href="http://www.hotdon.com.cn" id="hotdon">hotdon</a>
<div id='info' style="cursor:hand;">
信息列表
</div>
</body>
</html>
<script type="text/javascript">
new Tooltip('info', 'tooltip1');
new Tooltip('hotdon', 'tooltip2');
</script>
*/
//代码文件:tooltip.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype.js库
/* tooltip.js - Small tooltip library on top of Prototype
*
* Usage:
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
* <script type="text/javascript">
* var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
* </script>
*
* Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
* be shown. On o mouseOut the tooltip disappears.
*
* Example:
*
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
*
* <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
* Detail infos on product 1.<br />
* </div>
*
* <div id='product_1'>
* This is product 1
* </div>
* 以下代码应该放在所有的element定义之后,一般放置在页面的底部。
* <script type="text/javascript">
* var my_tooltip = new Tooltip('product_1', 'tooltip');//使用默认的CSS,将忽略自定义的CSS
* var my_tooltip = new Tooltip('product_1', 'tooltip',false);//使用自定义的CSS
* </script>
*
* You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
*/
//需要使用prototype.js文件
var Tooltip = Class.create();
Tooltip.prototype = {
version:'1.0.0',//版本
//default_css:true,
style:{
marging:"0px",
padding:"5px 8px 3px 8px",
backgroundColor:"#FFFFFF",//"#d6d6fc",
color:"#349045",
borderWidth:"1px",
borderStyle:"solid",
borderColor:"gray",
filter:"progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)"
},
initialize: function(element, tool_tip) {
this.initialize(element,tool_tip,true);
},
initialize: function(element, tool_tip,default_css) {
if (default_css==false) {
this.default_css=false;
}else {
this.default_css=true;
}
var options = Object.extend({
delta_x: 5,
delta_y: 5,
zindex: 1000//足够大的数,使层能够显示在最前面
}, arguments[1] || {});
this.element = $(element);
this.tool_tip = $(tool_tip);
this.options = options;
this.tool_tip.hide(); // hide the tool-tip by default
this.eventMouseOver = this.showTooltip.bindAsEventListener(this);//绑定事件处理程序
this.eventMouseOut = this.hideTooltip.bindAsEventListener(this);
this.registerEvents();
},
destroy: function() {//解除事件处理
Event.stopObserving(this.element, "mouseover", this.eventMouseOver);//停止对事件的观察(监听)
Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
},
registerEvents: function() {//注册事件处理
Event.observe(this.element, "mouseover", this.eventMouseOver);
Event.observe(this.element, "mouseout", this.eventMouseOut);
},
showTooltip: function(event){
Event.stop(event);
// get Mouse position
var mouse_x = Event.pointerX(event);
var mouse_y = Event.pointerY(event);
// decide if wee need to switch sides for the tooltip
var dimensions = Element.getDimensions( this.tool_tip );
var element_width = dimensions.width;
var element_height = dimensions.height;
if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) ){ // too big for X
mouse_x = mouse_x - element_width;
// apply delta to make sure that the mouse is not on the tool-tip
mouse_x = mouse_x - this.options.delta_x;
} else {
mouse_x = mouse_x + this.options.delta_x;
}
if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) ){ // too big for Y
mouse_y = mouse_y - element_height;
// apply delta to make sure that the mouse is not on the tool-tip
mouse_y = mouse_y - this.options.delta_y;
} else {
mouse_y = mouse_y + this.options.delta_y;
}
// now set the right styles
this.setStyles(mouse_x, mouse_y);
// finally show the Tooltip
//new Effect.Appear(this.tool_tip);
new Element.show(this.tool_tip);
},
setStyles: function(x, y){
// set the right styles to position the tool tip
Element.setStyle(this.tool_tip, { position:'absolute',
top:y + "px",
left:x + "px",
zindex:this.options.zindex
});
// apply default theme if wanted
if (this.default_css==true){//应用缺省的css
Element.setStyle(this.tool_tip, this.style);
}
},
hideTooltip: function(event){
//new Effect.Fade(this.tool_tip);
new Element.hide(this.tool_tip);
},
getWindowHeight: function(){
var innerHeight;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerHeight = document.body.clientHeight;
} else {
innerHeight = window.innerHeight;
}
return innerHeight;
},
getWindowWidth: function(){
var innerWidth;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerWidth = document.body.clientWidth;
} else {
innerWidth = window.innerWidth;
}
return innerWidth;
}
}
/*
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/prototype.js" language="javascript" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id='tooltip1' style="display:none; margin: 5px; background-color: red;">
<h1>HOTDON</h1>
Detail infos on product 1.<br />
Detail infos on product 1.<br />
</div>
<div id='tooltip2' style="display:none; margin: 5px; background-color: red;">
<h1>INFO</h1>
Detail infos on product 1.<br />
Detail infos on product 1.<br />
</div>
<a href="http://www.hotdon.com.cn" id="hotdon">hotdon</a>
<div id='info' style="cursor:hand;">
信息列表
</div>
</body>
</html>
<script type="text/javascript">
new Tooltip('info', 'tooltip1');
new Tooltip('hotdon', 'tooltip2');
</script>
*/
//功能介绍:UrlParams分析Url参数
//代码文件:UrlParams-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
/*<script language="javascript" type="text/javascript">
var params=new UrlParams("http://www.pyp.edu.cn?id=1&name=zengqs");
alert(params.get("name"));
alert(params.get("id"));
alert(params.getArguments().length);
alert(params.getArguments()[1]);
</script>*/
var UrlParams = Class.create();
UrlParams.prototype={
args:new Object(),
args_name:new Array(),
initialize:function(query)
{
//this.args = new Object();
if (query.indexOf("?")!=-1)//如果包含?则取?之后的部分,以保持兼容性
{
query=query.substring(query.indexOf("?")+1);
}
var pairs = query.split("&"); //Break at &
this.args_name=new Array(pairs.length);
for(var i = 0; i < pairs.length; i++)
{
var pos = pairs[i].indexOf('='); //Look for "name=value"
if (pos == -1) continue; //If not found, skip
var argname = pairs[i].substring(0,pos); //Extract the name
var value = pairs[i].substring(pos+1); //Extract the value
this.args[argname] = unescape(value); //Store as a property
this.args_name[i]=argname;//保存参数名
// In JavaScript 1.5, use decodeURIComponent( )
// instead of escape( )
}
},
get:function(name)
{
return this.args[name];
},
getArguments:function()//获取所有的参数的名称的列表
{
return this.args_name;
}
};
//代码文件:UrlParams-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
/*<script language="javascript" type="text/javascript">
var params=new UrlParams("http://www.pyp.edu.cn?id=1&name=zengqs");
alert(params.get("name"));
alert(params.get("id"));
alert(params.getArguments().length);
alert(params.getArguments()[1]);
</script>*/
var UrlParams = Class.create();
UrlParams.prototype={
args:new Object(),
args_name:new Array(),
initialize:function(query)
{
//this.args = new Object();
if (query.indexOf("?")!=-1)//如果包含?则取?之后的部分,以保持兼容性
{
query=query.substring(query.indexOf("?")+1);
}
var pairs = query.split("&"); //Break at &
this.args_name=new Array(pairs.length);
for(var i = 0; i < pairs.length; i++)
{
var pos = pairs[i].indexOf('='); //Look for "name=value"
if (pos == -1) continue; //If not found, skip
var argname = pairs[i].substring(0,pos); //Extract the name
var value = pairs[i].substring(pos+1); //Extract the value
this.args[argname] = unescape(value); //Store as a property
this.args_name[i]=argname;//保存参数名
// In JavaScript 1.5, use decodeURIComponent( )
// instead of escape( )
}
},
get:function(name)
{
return this.args[name];
},
getArguments:function()//获取所有的参数的名称的列表
{
return this.args_name;
}
};
//功能介绍:窗体表单验证程序
//代码文件:FormValidate-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 功能:通用验证所有的表单元素.
// 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 正则表达式用例
// 1、^\S+[a-z A-Z]$ 不能为空 不能有空格 只能是英文字母
// 2、\S{6,} 不能为空 六位以上
// 2、\S{1,} 不能为空
// 3、^\d+$ 不能有空格 不能非数字
// 4、(.*)(\.jpg|\.bmp|\.gif|.png|\.jpeg)$ 只能是jpg和bmp格式
// 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式
//
//6-7用于select控件
//
// 6、^0$ 至少选一项
// 7、^0{2,}$ 至少选两项
//
// 8、^[\s|\S]{20,}$ 不能为空 二十字以上
// 9、^\+?[a-z0-9](([-+.]|[_]+)?[a-z0-9]+)*@([a-z0-9]+(\.|\-))+[a-z]{2,6}$邮件
// 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)*
//输入多个地址用逗号或空格分隔邮件
// 11、^(\([0-9]+\))?[0-9]{7,8}$电话号码7位或8位或前面有区号例如(022)87341628
// 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
// 只能是字母、数字、下划线;必须有@和.同时格式要规范 邮件
// 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子,更精练。
//14 ^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$
//
//例子:
// <input type="text" id="text1" checkReg="\S{2,4}" warning="姓名不能为空,长度为2-4个字母(汉字)!" value />
//<select name="type_show" id="type_show" checkReg="\S{1,}" warning="至少选择一项!">
// <option value selected>--请选择-- </option>
// <option value="1">男</option>
// <option value="0">女</option>
//</select>
//调用实例 if (false==new FormValidate().validate($('form_main'))) return false;
function FormValidate(){};
//以下构造方法需要使用prototype-1.4.0.js库
//var FormValidate=Class.create();
FormValidate.prototype={
//initialize:function(){},//Constructor function,prototype-1.4.0.js库类的构造函数,必须重载
validate:function(oForm)//类的公开的主要方法,oForm为要验证的表单的名称
{
var All_ele = oForm.elements;
//遍历所有表元素
for(var i=0;i<All_ele.length;i++)
{
//是否需要验证
//if(All_ele[i].checkReg)
if(All_ele[i].getAttribute('checkReg'))
{
//取得验证的正则字符串
//var sReg = All_ele[i].checkReg;//FireFox中不能工作
var sReg = All_ele[i].getAttribute('checkReg');//FireFoxzhong
//取得表单的值,用通用取值函数
var sVal = this.Getcheck_value(All_ele[i]);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg,"i");
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
//alert(All_ele[i].warning);
alert(All_ele[i].getAttribute('warning'));
//该表单元素取得焦点,用通用返回函数
this.check_GoBack(All_ele[i]);
return false;
}
}
}
return true;
},
//======================================以下均为帮助方法=================================
//通用取值函数分三类进行取值:文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个,
//单、多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
Getcheck_value:function (el)
{
//取得表单元素的类型
var sType = el.type;
var ret="";
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea": {ret=el.value; break;}
case "checkbox":
case "radio": { ret=this.GetValueChoose(el); break;}
case "select-one":
case "select-multiple": { ret=this.GetValueSel(el); break;}
}
return ret;
},
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
GetValueChoose:function (el)
{
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
for(var i=0;i<tmpels.length;i++)
{
if(tmpels[i].checked)
{
sValue += "0";
}
}
return sValue;
},
//取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
GetValueSel:function (el)
{
var svalue = "";
for(var i=0;i<el.options.length;i++)
{
//单选下拉框提示选项设置为value=""
if(el.options[i].selected && (el.options[i].value!=""))
{
svalue += "0";
}
}
return svalue;
},
//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
check_GoBack:function (el)
{
if (el==null) {return;}
try
{
//取得表单元素的类型
var sType = el.type;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea":
{
el.focus();
var rng=el.createTextRange();
rng.collapse(false);
rng.select();
break;
}
case "checkbox":
case "radio":
{
var All_ele=document.getElementsByName(el.name);
All_ele[0].focus();
break;
}
case "select-one":
case "select-multiple":
{
el.focus();
break;
}
}//switch
}
catch(e){}
},
//checkReg field
checkRegField:function (Field)
{
//是否需要验证
if(Field.checkReg)
{
//取得验证的正则字符串
var sReg = Field.checkReg;
//取得表单的值,用通用取值函数
var sVal = this.Getcheck_value(Field);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg);
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
alert(Field.warning);
//该表单元素取得焦点,用通用返回函数
this.check_GoBack(Field);
return false;
}
}
return true;
}
};
//代码文件:FormValidate-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 功能:通用验证所有的表单元素.
// 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 正则表达式用例
// 1、^\S+[a-z A-Z]$ 不能为空 不能有空格 只能是英文字母
// 2、\S{6,} 不能为空 六位以上
// 2、\S{1,} 不能为空
// 3、^\d+$ 不能有空格 不能非数字
// 4、(.*)(\.jpg|\.bmp|\.gif|.png|\.jpeg)$ 只能是jpg和bmp格式
// 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式
//
//6-7用于select控件
//
// 6、^0$ 至少选一项
// 7、^0{2,}$ 至少选两项
//
// 8、^[\s|\S]{20,}$ 不能为空 二十字以上
// 9、^\+?[a-z0-9](([-+.]|[_]+)?[a-z0-9]+)*@([a-z0-9]+(\.|\-))+[a-z]{2,6}$邮件
// 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)*
//输入多个地址用逗号或空格分隔邮件
// 11、^(\([0-9]+\))?[0-9]{7,8}$电话号码7位或8位或前面有区号例如(022)87341628
// 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
// 只能是字母、数字、下划线;必须有@和.同时格式要规范 邮件
// 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子,更精练。
//14 ^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$
//
//例子:
// <input type="text" id="text1" checkReg="\S{2,4}" warning="姓名不能为空,长度为2-4个字母(汉字)!" value />
//<select name="type_show" id="type_show" checkReg="\S{1,}" warning="至少选择一项!">
// <option value selected>--请选择-- </option>
// <option value="1">男</option>
// <option value="0">女</option>
//</select>
//调用实例 if (false==new FormValidate().validate($('form_main'))) return false;
function FormValidate(){};
//以下构造方法需要使用prototype-1.4.0.js库
//var FormValidate=Class.create();
FormValidate.prototype={
//initialize:function(){},//Constructor function,prototype-1.4.0.js库类的构造函数,必须重载
validate:function(oForm)//类的公开的主要方法,oForm为要验证的表单的名称
{
var All_ele = oForm.elements;
//遍历所有表元素
for(var i=0;i<All_ele.length;i++)
{
//是否需要验证
//if(All_ele[i].checkReg)
if(All_ele[i].getAttribute('checkReg'))
{
//取得验证的正则字符串
//var sReg = All_ele[i].checkReg;//FireFox中不能工作
var sReg = All_ele[i].getAttribute('checkReg');//FireFoxzhong
//取得表单的值,用通用取值函数
var sVal = this.Getcheck_value(All_ele[i]);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg,"i");
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
//alert(All_ele[i].warning);
alert(All_ele[i].getAttribute('warning'));
//该表单元素取得焦点,用通用返回函数
this.check_GoBack(All_ele[i]);
return false;
}
}
}
return true;
},
//======================================以下均为帮助方法=================================
//通用取值函数分三类进行取值:文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个,
//单、多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
Getcheck_value:function (el)
{
//取得表单元素的类型
var sType = el.type;
var ret="";
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea": {ret=el.value; break;}
case "checkbox":
case "radio": { ret=this.GetValueChoose(el); break;}
case "select-one":
case "select-multiple": { ret=this.GetValueSel(el); break;}
}
return ret;
},
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
GetValueChoose:function (el)
{
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
for(var i=0;i<tmpels.length;i++)
{
if(tmpels[i].checked)
{
sValue += "0";
}
}
return sValue;
},
//取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
GetValueSel:function (el)
{
var svalue = "";
for(var i=0;i<el.options.length;i++)
{
//单选下拉框提示选项设置为value=""
if(el.options[i].selected && (el.options[i].value!=""))
{
svalue += "0";
}
}
return svalue;
},
//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
check_GoBack:function (el)
{
if (el==null) {return;}
try
{
//取得表单元素的类型
var sType = el.type;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea":
{
el.focus();
var rng=el.createTextRange();
rng.collapse(false);
rng.select();
break;
}
case "checkbox":
case "radio":
{
var All_ele=document.getElementsByName(el.name);
All_ele[0].focus();
break;
}
case "select-one":
case "select-multiple":
{
el.focus();
break;
}
}//switch
}
catch(e){}
},
//checkReg field
checkRegField:function (Field)
{
//是否需要验证
if(Field.checkReg)
{
//取得验证的正则字符串
var sReg = Field.checkReg;
//取得表单的值,用通用取值函数
var sVal = this.Getcheck_value(Field);
//字符串->正则表达式,不区分大小写
var reg = new RegExp(sReg);
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
alert(Field.warning);
//该表单元素取得焦点,用通用返回函数
this.check_GoBack(Field);
return false;
}
}
return true;
}
};