在b、s开发中经常用到的javaScript技术

最新推荐文章于 2024-09-14 19:44:09 发布

littleboys

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量1.5k

点赞数 1

文章标签： javascript function input button null date

本文链接：https://blog.csdn.net/littleboys/article/details/154099

版权

有些是参照ｈｒｏｎｇ（黄蓉）的给出的答案。
也有是自己以前写的例子
或者是从网上搜索到的。

一、验证类
1、数字验证内
1.1 整数
/^(-|/+)?/d+$/　　不可以为空
/^[-+]?/d*$/ 可以为空
1.2 大于0的整数（用于传来的ID的验证)
/^/d+$/
1.3 负整数的验证
/^-/d+$/
1.4 整数不能大于iMax
根据上面的正则可以写出。
1.5 整数不能小于iMin
根据上面的正则可以写出。
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]);
      }
      ^(?:(?:(?:(?:1[6-9]|[2-9]/d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(//|-|/.)(?:0?2/1(?:29))$)|(?:(?:1[6-9]|[2-9]/d)?/d{2})(//|-|/.)(?:(?:(?:0?[13578]|1[02])/2(?:31))|(?:(?:0?[1,3-9]|1[0-2])/2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))/2(?:0?[1-9]|1/d|2[0-8]))$

Description: This expression validates dates in the y/m/d format from 1600/1/1 - 9999/12/31. Follows the same validation rules for dates as my other date validator (m/d/y format) located in this library.
Matches: [04/2/29], [2002-4-30], [02.10.31] [ More Details]
Non-Matches: [2003/2/29], [02.4.31], [00/00/00]

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 所有的表单的值都不能为空
<input οnblur="if(this.value.replace(/^/s+|/s+$/g,'')=='')alert('不能为空!')">

3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
//检验文本框中内容是否超长
function CheckTextareaLength(val, max_length) {
     var str_area=document.forms[0].elements[val].value;
     if (str_area!=null&&str_area.length > max_length)
     {
  alert("字段文字超长，最多可输入" + max_length +"个字符，请重新输入！");
  document.forms[0].elements[val].focus();
  document.forms[0].elements[val].select();
  return false;
     }
     return true;
}
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。

function CheckRadio(val,msg1,msg2)
{
    var is_radio=document.forms[0].elements[val];
    var s_msg1=(msg1==null || msg1=="")? "请选择 radio!":msg1;
    var s_msg2=(msg2==null || msg2=="")? "没有可选的 radio!":msg2;

    if(is_radio)
    {
         if (document.forms[0].elements[val].value != null)
         {
            if (document.forms[0].elements[val].checked)
            {
                return true;
            }
            else
            {
                alert(s_msg1);
                return false;
            }
         }
         else
         {
            var check_length = document.forms[0].elements[val].length;
            var i_count=0
            for(var i=0;i<check_length;i++)
            {
                if (document.forms[0].elements[val](i).checked)
                {
                    i_count=i_count+1;
                    return true;
                }
            }
            if(i_count==0)
            {
                alert(s_msg1);
                return false;
            }
         }
    }//
    else
    {
        alert(s_msg2);
        return false;
    }

}
3.6 判断复选框是否选择.
function CheckCheckbox(val,msg1,msg2)
{
    var is_radio=document.forms[0].elements[val];
    var s_msg1=(msg1==null || msg1=="")? "请选择CheckBox!":msg1;
    var s_msg2=(msg2==null || msg2=="")? "没有可选的CheckBox!":msg2;

}
3.7 复选框的全选，多选，全不选，反选
<script>
function SelectAll()
{
var cInput=document.all.tags('INPUT');
for(var i in cInput)
if(cInput[i].type=='checkbox') cInput[i].checked=true;
}
</script>

</form>

<SCRIPT LANGUAGE="JavaScript">
function checkAll(str)
{
var a = document.getElementsByName(str);
var n = a.length;
for (var i=0; i<n; i++)
a[i].checked = window.event.srcElement.checked;
}
function checkItem(str)
{
var e = window.event.srcElement;
var all = eval("document.hrong."+ str);
if (e.checked)
{
    var a = document.getElementsByName(e.name);
    all.checked = true;
    for (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ all.checked = false; break;}
    }
}
else all.checked = false;
}
</SCRIPT>

3.8 文件上传过程中判断文件类型
<input type=file οnchange="alert(this.value.match(/^(.*)(/.)(.{1,8})$/)[3])">

4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
<input οnblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2 判断字符由字母和数字组成。
<input οnblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">

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;
      }
　　　另外一个
<script>
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

function cidInfo(sId){
var iSum=0
var info=""
if(!/^/d{17}(/d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

var s="202.197.78.129";
alert(isip(s))
</SCRIPT>
６．５　．加sp1后还能用的无边框窗口！！
<HTML XMLNS:IE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<IE:Download ID="include" STYLE="behavior:url(#default#download)" />
<title>Chromeless Window</title>

<SCRIPT LANGUAGE="JScript">
/*--- Special Thanks For andot ---*/

/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/

/*--- Thanks For andot Again ---*/

var CW_width = 400;
var CW_height = 300;
var CW_top = 100;
var CW_left = 100;
var CW_url = "/";
var New_CW = window.createPopup();
var CW_Body = New_CW.document.body;
var content = "";
var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(οnmοuseοut=οnmοuseup=function(){this.style.borderStyle='outset'}, οnmοusedοwn=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//Build Window
include.startDownload(CW_url, function(source){content=source});

function insert_content(){
var temp = "";
CW_Body.style.overflow  = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border  = "solid black 1px";
content = content.replace(/<a ([^>]*)>/g,"<a οnclick='parent.open(this.href);return false' $1>");
temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' οndblclick=/"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" οnmοuseup='parent.drag_up(event)' οnmοusemοve='parent.drag_move(event)' οnmοusedοwn='parent.drag_down(event)' onselectstart='return false' οncοntextmenu='return false'>";
temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>";
temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";
temp += "<span id=Help οnclick=/"alert('Chromeless Window For IE6 SP1 - Ver 1.0//n//nCode By Windy_sk//n//nSpecial Thanks For andot')/" style=/""+CSStext+"font-family:System;padding-right:2px;/">?</span>";
temp += "<span id=Min   οnclick='parent.New_CW.hide();parent.blur()' style=/""+CSStext+"font-family:Webdings;/" title='Minimum'>0</span>";
temp += "<span id=Max   οnclick=/"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" style=/""+CSStext+"font-family:Webdings;/" title='Maximum'>1</span>";
temp += "<span id=Close οnclick='parent.opener=null;parent.close()' style=/""+CSStext+"font-family:System;padding-right:2px;/" title='Close'>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"'>";
temp += content;
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
}

setTimeout("insert_content()",1000);

window.onfocus = show_CW;
window.onresize = show_CW;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){
New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);
return false;
}
}

function drag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

function drag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;
CW_top = e.screenX-drag_x;
CW_left = e.screenY-drag_y;
}

</SCRIPT>
</HTML>

６．６　电话号码的验证

要求：
　　(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}$)

二、功能类

1、时间与相关控件类
1.1 日历
精华区的日历

1.2 时间控件

1.3 万年历
http://202.112.86.128/studentspace/aqyw/js/calendars/rili/
1.4 显示动态显示时钟效果（文本，如OA中时间）
特效很容易找到的
1.5 显示动态显示时钟效果 (图像，像手表)
特效很容易找到的
2、表单类
2.1 自动生成表单
2.2 动态添加，修改，删除下拉框中的元素
大版主的ｊｓ宝库里面的对select 的操作已经可以是精品了。
2.3 可以输入内容的下拉框

2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送)

3、打印类
3.1 打印控件
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE=javascript>
<!--
function setPrint()
{
WB.ExecWB(8,1);
}
function previewPrint()
{
WB.ExecWB(7,1)
}

//-->
</SCRIPT>
<script language=vbscript>
function setup_page
        Dim wsh
        Set wsh = CreateObject("WScript.Shell")
        on error resume next

wsh.RegWrite "HKCU/Software/Microsoft/Internet explorer/PageSetup/header", "", "REG_SZ"
wsh.RegWrite "HKCU/Software/Microsoft/Internet Explorer/PageSetup/footer", "", "REG_SZ"

end function

</script>
</HEAD>

4、事件类
4.1 屏蔽右键
4.2 屏蔽所有功能键
4.3 --> 和<-- F5 F11,F9,F1
4.4 屏蔽组合键ctrl+N
<script>
//禁止ctrl+n和禁止ctrl+r和禁止shift+f10 禁止鼠标右键or左右键和禁止f5
var oLastBtn=0,bIsMenu=false
if (window.Event)
{
document.captureEvents(Event.MOUSEUP);
}

function nocontextmenu()
{
event.cancelBubble=true;
event.returnValue=false;
return false;
}

function norightclick(e)

{
if(window.Event)
{
if (e.which !=1)
{
return false;
}
}
else
if(event.button!=1)
{
event.cancelBubble=true;
event.returnValue=false;
return false;
}
}

document.οncοntextmenu=nocontextmenu;
document.οnmοusedοwn=norightclick;

function onKeyDown()
{
if ((event.altKey)||((event.keyCode==8)&&(event.srcElement.type!="text"&&event.srcElement.type!="textarea"&&event.srcElement.type!="password"))||((event.ctrlKey)&&((event.keyCode==78)||(event.keyCode==82)))||(event.keyCode==116))
{
alert(event.keyCode);
event.keyCode=0;
event.returnValue=false;
}
}
</script>
<body οnkeydοwn="onKeyDown()">
<body>
</html>
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、文本排序
10，画图类，含饼、柱、矢量贝滋曲线
<OBJECT
id=S
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

11，操纵客户端注册表类
<SCRIPT>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//MindReader", "Goocher!", "REG_SZ");
var bKey = WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//");
WScript.Echo (WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//MindReader"));
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//MindReader");
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//");
WshShell.RegDelete ("HKCU//Software//ACME//");
</SCRIPT>

12，DIV层相关（拖拽、显示、隐藏、移动、增加）
13，TABLAE相关(客户端动态增加行列，模拟进度条，滚动列表等)
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
    var count=0;
    for (i=0; i < document.all.mytable.rows.length; i++) {
        for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {
            document.all.mytable.rows(i).cells(j).innerText = count;
            count++;
        }
    }
}
</SCRIPT>
<BODY οnlοad="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
</BODY>
</HTML>
14，各种<object classid=>相关类，如播放器，flash与脚本互动等
15, 刷新/模拟无刷新异步调用类（XMLHttp或iframe,frame）

16 字符扩展
//测字符串实际长度
String.prototype.Tlength = function(){var arr=this.match(/[^/x00-/xff]/ig);return this.length+(arr==null?0:arr.length);}
例子："aa啦啦aa".Tlength()

//字符串左取
String.prototype.left = function(num,mode){if(!//d+/.test(num))return(this);var str = this.substr(0,num);if(!mode) return str;var n = str.Tlength() - str.length;num = num - parseInt(n/2);return this.substr(0,num);}

//字符串右取
String.prototype.right = function(num,mode){if(!//d+/.test(num))return(this);var str = this.substr(this.length-num);if(!mode) return str;var n = str.Tlength() - str.length;num = num - parseInt(n/2);return this.substr(this.length-num);}

//字符串包含
String.prototype.GetCount = function(str,mode){return eval("this.match(/("+str+")/g"+(mode?"i":"")+").length");}

//字符串去除两端空字符
String.prototype.Trim=function(){return this.replace(/(^/s*)|(/s*$)/g,"");}
String.prototype.Ltrim = function(){return this.replace(/(^/s*)/g, "");}
String.prototype.Rtrim = function(){return this.replace(/(/s*$)/g, "");}

17 字符长度计算
1)
function checkstr0(str)
{
var charPos = str.length;
if (str.match(/[/u4E00-/u9FA5]/)) charPos++;
return charPos;
}
2)
function checkstr1(str)
{
num=str.length
var arr=str.match(/[^x00-x80]/ig)
if(arr!=null)num+=arr.length
return num;
}
3)
String.prototype.Tlength = function(){var arr=this.match(/[^/x00-/xff]/ig);return this.length+(arr==null?0:arr.length);}
例子："aa啦啦aa".Tlength()
4)
    function checkstr2(str)
    {
var valueLen = 0;
        for (i = 0; i < str.length; i ++)
        {
            var code = escape(str.charAt(i));
            if ((code.length >= 4) && (code < '%uFF60' || code > '%uFF9F'))
            {
                valueLen += 2;
            }
            else
            {
                valueLen ++;
            }
        }
return valueLen;
    }
5)
//判断字符长度    dev－club
function strlength(str)
{
    var l=str.length;
    var n=l
    for (var i=0;i<l;i++)
    {
        if (str.charCodeAt(i)<0||str.charCodeAt(i)>255) n++
    }
    return n
}