BlogJava-study-随笔分类-JavaScript

在b/s开发中经常用到的javascript技术

JAVA之路 — Thu, 26 Apr 2007 02:12:00 GMT

在b/s开发中经常用到的javascript技术
一、验证类
1、数字验证内
1.1 整数
1.2 大于0的整数（用于传来的ID的验证)
1.3 负整数的验证
1.4 整数不能大于iMax
1.5 整数不能小于iMin
2、时间类
2.1 短时间，形如 (13:04:06)
2.2 短日期，形如 (2003-12-05)
2.3 长时间，形如 (2003-12-05 13:04:06)
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
4.2 判断字符由字母和数字组成。
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
5.2 判断ie的版本
5.3 判断客户端的分辨率

6、结合类
6.1 email的判断。
6.2 手机号码的验证
6.3 身份证的验证

二、功能类

1、时间与相关控件类
1.1 日历
1.2 时间控件
1.3 万年历
1.4 显示动态显示时钟效果（文本，如OA中时间）
1.5 显示动态显示时钟效果 (图像，像手表)
2、表单类
2.1 自动生成表单
2.2 动态添加，修改，删除下拉框中的元素
2.3 可以输入内容的下拉框
2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送)

3、打印类
3.1 打印控件
4、事件类
4.1 屏蔽右键
4.2 屏蔽所有功能键
4.3 --> 和<-- F5 F11,F9,F1
4.4 屏蔽组合键ctrl+N
5、网页设计类
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现）
5.2 html编辑控件类
5.3 颜色选取框控件
5.4 下拉菜单
5.5 两层或多层次的下拉菜单
5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目)
5.7 状态栏，title栏的动态效果（例子很多，可以研究一下）
5.8 双击后，网页自动滚屏
6、树型结构。
6.1 asp+SQL版
6.2 asp+xml+sql版
6.3 java+sql或者java+sql+xml
7、无边框效果的制作
8、连动下拉框技术
9、文本排序

一、验证类
1、数字验证内
1.1 整数
      /^(-|\+)?\d+$/.test(str)
1.2 大于0的整数（用于传来的ID的验证)
      /^\d+$/.test(str)
1.3 负整数的验证
      /^-\d+$/.test(str)
2、时间类
2.1 短时间，形如 (13:04:06)
      function isTime(str)
      {
        var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
        if (a == null) {alert('输入的参数不是时间格式'); return false;}
        if (a[1]>24 || a[3]>60 || a[4]>60)
        {
          alert("时间格式不对");
          return false
        }
        return true;
      }
2.2 短日期，形如 (2003-12-05)
      function strDateTime(str)
      {
         var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
         if(r==null)return false;
         var d= new Date(r[1], r[3]-1, r[4]);
         return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
      }
2.3 长时间，形如 (2003-12-05 13:04:06)
      function strDateTime(str)
      {
        var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
        var r = str.match(reg);
        if(r==null)return false;
        var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
        return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
      }
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空

3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成

4.2 判断字符由字母和数字组成。

4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
      /^([a-zA-z_]{1})([\w]*)$/g.test(str)
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
      window.navigator.appName
5.2 判断ie的版本
      window.navigator.appVersion
5.3 判断客户端的分辨率
      window.screen.height; window.screen.width;

6、结合类
6.1 email的判断。
      function ismail(mail)
      {
        return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
      }
6.2 手机号码的验证
6.3 身份证的验证
      function isIdCardNo(num)
      {
        if (isNaN(num)) {alert("输入的不是数字！"); return false;}
        var len = num.length, re;
        if (len == 15)
          re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
        else if (len == 18)
          re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
        else {alert("输入的数字位数不对！"); return false;}
        var a = num.match(re);
        if (a != null)
        {
          if (len==15)
          {
            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          else
          {
            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
        }
        return true;
      }

3.7 复选框的全选，多选，全不选，反选

3.8 文件上传过程中判断文件类型

画图:
id=S
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">

写注册表：

TABLAE相关(客户端动态增加行列）

１．身份证严格验证：

２．验证ＩＰ地址

３．加sp1后还能用的无边框窗口！！

Chromeless Window

电话号码的验证

要求：
　　(1)电话号码由数字、"("、")"和"-"构成
　　(2)电话号码为3到8位
　　(3)如果电话号码中包含有区号，那么区号为三位或四位
　　(4)区号用"("、")"或"-"和其他部分隔开
　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0
　　(6)11位移动电话号码的第一位和第二位为"13"
　　(7)12位移动电话号码的第二位和第三位为"13"
　　根据这几条规则，可以与出以下正则表达式：
　　(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^$[0-9]{3,4}$[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应。
function numbersonly(field,event){
var key,keychar;
if(window.event){
key = window.event.keyCode;
}
else if (event){
key = event.which;
}
else{
return true
}
keychar = String.fromCharCode(key);
if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){
return true;
}
else if(("0123456789.").indexOf(keychar)>-1){
window.status = "";
return true;
}
else {
window.status = "Field excepts numbers only";
return false;
}
}

验证ip

str=document.RegExpDemo.txtIP.value;
if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false)
{
window.alert('错误的IP地址格式');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
if(RegExp.$1<1 || RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)
{
window.alert('错误的IP地址');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除如 010.020.020.03 前面的0
var str=str.replace(/0(\d)/g,"$1");
str=str.replace(/0(\d)/g,"$1");
window.alert(str);

//一下是取数据的类 http://blog.knowsky.com
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
function GetTableData(Obj,LeftLen,RightLen){
var MyObj=document.all(Obj);
var iRow=MyObj.rows.length;
var iLen=MyObj.rows[0].cells.length;
var i,j;

TableData=new Array();
for (i=0;i< iRow;i++){
   TableData[i]=new Array();
   for (j=0;j   TableStr=MyObj.rows(i).cells(j).innerText;
   TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
   TableStr=TableStr.replace(/ /gi,"").replace(/\r\n/ig,"");
   TableData[i][j]=TableStr;
   }
   }

this.TableData=TableData;
this.cols=this.TableData[0].length;
this.rows=this.TableData.length;
this.rowindex=0;
}

function movenext(Step){
if (this.rowindex>=this.rows){
return
}

if (Step=="" || typeof(Step)=="undefined") {
if (this.rowindex this.rowindex++;
return;

}
else{
if (this.rowindex + Step<=this.rows-1 && this.rowindex + Step>=0 ){
this.rowindex=this.rowindex + Step;
}
else
{
if (this.rowindex + Step<0){
   this.rowindex= 0;
   return;
   }
if (this.rowindex + Step>this.rows-1){
   this.rowindex= this.rows-1;
   return;
   }
}
}
}

}

this.TableData=desc_array;
}
return;
}

this.TableData=asc_array;
}
return;
}

function getData(Field,FieldValue){
var colindex=-1;
var i,j;

GetData=new Array();
if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){
return this.TableData;
}

   for(j=0;j      if (this.TableData[0][j]==Field){
     colindex=j;
     }
   }
   if (colindex!=-1){

   for(i=1;i      if (this.TableData[i][colindex]==FieldValue){
     GetData[i]=new Array();
     GetData[i]=this.TableData[i];
     }
   }
   }
   return GetData;
}
function DeletE(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));
this.rows=this.TableData.length;
return;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
   colindex=Field;
}
else
{
for (i=0;i   if (this.TableData[0][i]==Field){
   colindex=i;
   break;
   }
}
}
if (colindex!=-1) {
this.TableData[this.rowindex][colindex]=FieldValue;
}

}
function movefirst(){
this.rowindex=0;
}
function movelast(){
this.rowindex=this.rows-1;
}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
GetTableData.prototype.MoveNext = movenext;
GetTableData.prototype.GetFieldData = getfielddata;
GetTableData.prototype.Sort_asc = sort_asc;
GetTableData.prototype.Sort_desc = sort_desc;
GetTableData.prototype.GetData = getData;
GetTableData.prototype.Delete = DeletE;
GetTableData.prototype.UpdateField = updateField;
GetTableData.prototype.MoveFirst = movefirst;

具体的例子：http://202.119.73.208/NetEAn/com/test/jsprint.htm

在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数

//回车键换为tab
function enterToTab()
{
    if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
       && event.keyCode == 13)
    {
        event.keyCode = 9;
    }
}

有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:）

//===============================start================================

测试修改表格

    onclick="editerTableCell('editer_table','no_editer')">

自由编辑表格
单击开始编辑按钮,然后点击各单元格编辑	2	3
4	5	6
one	two	three
four	five	six

请单击某个单元格进行编辑!

JAVA之路 2007-04-26 10:12 发表评论

JS应用（资料很全）

JAVA之路 — Fri, 13 Apr 2007 04:31:00 GMT

摘要: 如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!! 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();&... 阅读全文

JAVA之路 2007-04-13 12:31 发表评论

js常用函数

JAVA之路 — Fri, 06 Apr 2007 04:59:00 GMT

//函数名：chksafe
//功能介绍：检查是否含有"'",'\\',"/"
//参数说明：要检查的字符串
//返回值：0：是 1：不是
function chksafe(a)
{
return 1;
/* fibdn = new Array ("'" ,"\\", "、", ",", ";", "/");
i=fibdn.length;
j=a.length;
for (ii=0;ii { for (jj=0;jj { temp1=a.charAt(jj);
   temp2=fibdn[ii];
   if (tem';p1==temp2)
   { return 0; }
}
}
return 1;
*/
}

//函数名：chkspc
//功能介绍：检查是否含有空格
//参数说明：要检查的字符串
//返回值：0：是 1：不是
function chkspc(a)
{
var i=a.length;
var j = 0;
var k = 0;
while (k {
if (a.charAt(k) != " ")
j = j+1;
k = k+1;
}
if (j==0)
{
return 0;
}

if (i!=j)
{ return 2; }
else
{
return 1;
}
}

//函数名：chkemail
//功能介绍：检查是否为Email Address
//参数说明：要检查的字符串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf('@');
var tempd = a.indexOf('.');
if (temp > 1) {
if ((i-temp) > 3){

    if ((i-tempd)>0){
     return 1;
    }

}
}
return 0;
}

//opt1 小数 opt2 负数
//当opt2为1时检查num是否是负数
//当opt1为1时检查num是否是小数
//返回1是正确的，0是错误的
function chknbr(num,opt1,opt2)
{
var i=num.length;
var staus;
//staus用于记录.的个数
status=0;
if ((opt2!=1) && (num.charAt(0)=='-'))
{
//alert("You have enter a invalid number.");
return 0;

}
//当最后一位为.时出错
if (num.charAt(i-1)=='.')
{
//alert("You have enter a invalid number.");
return 0;
}

for (j=0;j {
if (num.charAt(j)=='.')
{
   status++;
}
if (status>1)
{
//alert("You have enter a invalid number.");
return 0;
}
if (num.charAt(j)<'0' || num.charAt(j)>'9' )
{
   if (((opt1==0) || (num.charAt(j)!='.')) && (j!=0))
   {
    //alert("You have enter a invalid number.");
    return 0;
   }
}
}
return 1;
}

//函数名：chkdate
//功能介绍：检查是否为日期
//参数说明：要检查的字符串
//返回值：0：不是日期 1：是日期
function chkdate(datestr)
{
var lthdatestr
if (datestr != "")
lthdatestr= datestr.length ;
else
lthdatestr=0;

var tmpy="";
var tmpm="";
var tmpd="";
//var datestr;
var status;
status=0;
if ( lthdatestr== 0)
return 0

for (i=0;i { if (datestr.charAt(i)== '-')
{
   status++;
}
if (status>2)
{
   //alert("Invalid format of date!");
   return 0;
}
if ((status==0) && (datestr.charAt(i)!='-'))
{
   tmpy=tmpy+datestr.charAt(i)
}
if ((status==1) && (datestr.charAt(i)!='-'))
{
   tmpm=tmpm+datestr.charAt(i)
}
if ((status==2) && (datestr.charAt(i)!='-'))
{
   tmpd=tmpd+datestr.charAt(i)
}

}
year=new String (tmpy);
month=new String (tmpm);
day=new String (tmpd)
//tempdate= new String (year+month+day);
//alert(tempdate);
if ((tmpy.length!=4) || (tmpm.length>2) || (tmpd.length>2))
{
//alert("Invalid format of date!");
return 0;
}
if (!((1<=month) && (12>=month) && (31>=day) && (1<=day)) )
{
//alert ("Invalid month or day!");
return 0;
}
if (!((year % 4)==0) && (month==2) && (day==29))
{
//alert ("This is not a leap year!");
return 0;
}
if ((month<=7) && ((month % 2)==0) && (day>=31))
{
//alert ("This month is a small month!");
return 0;

}
if ((month>=8) && ((month % 2)==1) && (day>=31))
{
//alert ("This month is a small month!");
return 0;
}
if ((month==2) && (day==30))
{
//alert("The Febryary never has this day!");
return 0;
}

return 1;
}

//函数名：fucPWDchk
//功能介绍：检查是否含有非数字或字母
//参数说明：要检查的字符串
//返回值：0：含有 1：全部为数字或字母
function fucPWDchk(str)
{
var strSource ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var ch;
var i;
var temp;

for (i=0;i<=(str.length-1);i++)
{

    ch = str.charAt(i);
    temp = strSource.indexOf(ch);
    if (temp==-1)
    {
     return 0;
    }
}
if (strSource.indexOf(ch)==-1)
{
    return 0;
}
else
{
    return 1;
}
}

function jtrim(str)
{     while (str.charAt(0)==" ")
          {str=str.substr(1);}
     while (str.charAt(str.length-1)==" ")
         {str=str.substr(0,str.length-1);}
     return(str);
}

//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp="0123456789";
if ( NUM.length== 0)
return 0
for (i=0;i {
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//说明有字符不是数字
return 0;
}
}
//说明是数字
return 1;
}

//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp="0123456789-()# ";
for (i=0;i {
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return 0;
}
}
//说明合法
return 1;
}

//函数名：fucCheckLength
//功能介绍：检查字符串的长度
//参数说明：要检查的字符串
//返回值：长度值
function fucCheckLength(strTemp)
{
var i,sum;
sum=0;
for(i=0;i {
if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))
   sum=sum+1;
else
   sum=sum+2;
}
return sum;
}
//函数名：getFileSize
//功能介绍：取到文件的大小
//参数说明：文件路径
//返回值：文件大小：是文件不存在：不是
function getFileSize(filePath)
{
var path = filePath;
var filesize = "";
var fso = new ActiveXObject("Scripting.FileSystemObject");
if ( fso.FileExists(path))
{
      var file= fso.GetFile(path);
      filesize = parseInt(file.size /1024) +"K";
}else
{
      filesize = "文件不存在!";
}
}
//函数名：homepage
//功能介绍：设当前页为主页
//参数说明：URL
function homepage(URL)
{
this.style.behavior="url(#default#homepage)";
this.setHomePage(URL);
}

//函数名：jionsouc
//功能介绍：加入收藏夹
//参数说明：URL,网站描述
function jionsouc(URL,display)
{
window.external.addFavorite(URL,display)
}
//函数名：FilterType
//功能介绍:筛选后缀不为bmp,jpg,gif的上传文件
//参数为当然上传组件的对象.
function FilterType(obj)
{
    //文件名,取得文件的扩展名
    var reg=/([^.]+)$/.exec(obj.value);
    sType = RegExp.$1;
    if(!/(jpg|gif|bmp)$/ig.test(sType))
    {
        alert("请选择bmp,jpg,gif文件!");
        obj.select();
        document.execCommand("delete");
    }
}

//函数名：doZoom
//功能介绍：改变页面中的字体.如文章字体的大小.
//参数ID取到页面的ID名称,size为字体大小
function doZoom(ID,size)
{
document.getElementById(ID).style.fontSize=size+"px"
}

//函数名：isEmail
//功能介绍：验证页面输入的值是否为email格式的.
//参数: 参数为输入的字符串
function isEmail(string)
{
if (string.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]

+$/) != -1)
    return true;
   else
    return false;
}

//函数名：round
//功能介绍：四舍五入的函数.
//参数: V为取到的数字,P为小数点后面的位数.
function round(v,p){
         var tempInt,tempDot,temp,Power,xxrl
   temp = v;
   Power = 1;
   for(var i=0;i      Power = Power * 10;
   }
   tempInt=parseInt(temp*Power);
   tempDot=v*Power-tempInt;
   if(tempDot>=0.499){
    tempInt=tempInt+1;
   }
   xxrl = parseFloat(tempInt/Power,4);
}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1553173

JAVA之路 2007-04-06 12:59 发表评论