집 >웹 프론트엔드 >JS 튜토리얼 >B/S 개발에서 자주 사용되는 JavaScript 기술 및 코드_javascript 기술

B/S 개발에서 자주 사용되는 JavaScript 기술 및 코드_javascript 기술

WBOY원래의: 2016-05-16 19:17:19977검색

b/s 개발에 자주 사용되는 JavaScript 기술
1. 검증 클래스
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 이메일 결정.
6.2 휴대폰번호 확인
6.3 신분증 확인

2. 기능 카테고리

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.1 쉴드 마우스 오른쪽 버튼 클릭
4.2 모든 기능 키 차단
4.3 --> 및 4.4 키 조합 차단 ctrl N
5.1 연속 스크롤 텍스트 및 그림 (참고 연속적이며 텍스트와 그림의 두 문단 사이에 공백이 없습니다)
5.2 HTML 편집 제어 클래스
5.3 색상 선택 상자 제어
5.4 드롭다운 메뉴5.5 2레벨 또는 다중 레벨 드롭다운 메뉴
5.6 IE 메뉴와 유사한 버튼. (이 효과는 rongshuxa.com의 탐색 열과 같습니다.)
5.7 상태 표시줄 및 제목 표시줄의 동적 효과(예제가 많으므로 학습할 수 있습니다.)
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.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("시간 형식이 잘못되었습니다. ");
false 반환
}
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 复选框的全选，多选，全不选，反选

１．身份证严格验证：

<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?"男":"女") } document.write(cidInfo("380524198002300016")," "); document.write(cidInfo("340524198002300019")," ") document.write(cidInfo("340524197711111111")," ") document.write(cidInfo("34052419800101001x")," "); </script>

２．验证ＩＰ地址
<script> function isip(s){ var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}}; var re=s.split(".") return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false } var s="202.197.78.129"; alert(isip(s)) </script>

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

Chromeless Window

<script> /*--- 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(onmouseout=onmouseup=function(){this.style.borderStyle='outset'}, onmousedown=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 onclick='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' ondblclick=\"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" onmouseup='parent.drag_up(event)' onmousemove='parent.drag_move(event)' onmousedown='parent.drag_down(event)' onselectstart='return false' oncontextmenu='return false'>"; temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1"; temp += "<td style='color:#ffffff;padding-right:5px;' align=right>"; temp += "?"; temp += "0"; temp += "1"; temp += "x"; temp += "<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 += ""; temp += ""; CW_Body.innerHTML = temp; } setTimeout("insert_content()",1000); var if_max = true; function show_CW(){ window.moveTo(10000, 10000); if(if_max){ New_CW.show(CW_top, CW_left, CW_width, CW_height); if(typeof(New_CW.document.all.include)!="undefined"){ New_CW.document.all.include.style.width = CW_width; New_CW.document.all.Max.innerText = "1"; } }else{ New_CW.show(0, 0, screen.width, screen.height); New_CW.document.all.include.style.width = screen.width; } } 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>

电话号码的验证

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

<script> function PhoneCheck(s) { var str=s; var reg=/(^[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}$)/ alert(reg.test(str)); } </script>

具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应。
함수 번호만(필드, 이벤트){
var key,keychar;
if(window.event){
키 = window.event.keyCode;
}
else if (이벤트){
key = event.which;
}
else{
true를 반환
}
keychar = String.fromCharCode(key);
if((키 == null)||(키 == 0)||(키 == 8)||(키 == 9)||(키 == 13)||(키 == 27 )){
true를 반환합니다.
}
else if(("0123456789.").indexOf(keychar)>-1){
window.status = "";
true를 반환합니다.
}
else {
window.status = "필드는 숫자만 제외함";
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();
반환;
}
if(RegExp.$1254||RegExp.$2254||RegExp.$3254||RegExp.$4254)
{
window.alert('현재 IP 위치');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
반환;
}
//剔除如 010.020.020.03 앞면 적0
var str=str.replace(/0(d)/g,"$1");
str=str.replace(/0(d)/g,"$1");
window.alert(str);

//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段name称行
//GetTableData类提供MoveNext방법 ,参数向下移动,负数向上.
//GetFieldData 방식을 지정하는 방법
//Sort_desc 방식을 지정하는 방법
//Sort_asc 방식을 지정하는 방법
//GetData 메소드 설명字段值为特定值的数据数组,提供数据,可以에서외부进行其他处理
//삭제방법법删除当前记录,数组减少一行
//初始化,Obj:테이블 이름,Leftlen:左面多余数据长島,Rightlen:右face多余数据长titude,
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();
(i=0;iTableData[i]=new Array();
(j=0;jTableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(/ /gi,"").replace(/rn/ig,"");
테이블데이터[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)=="정의되지 않음") {
if (this.rowindexthis.rowindex ;
반환;

}
else{
if (this.rowindex 단계=0 ){
this.rowindex=this.rowindex 단계;
}
else
{
if (this.rowindex 단계this.rowindex= 0;
반환;
}
if (this.rowindex 단계>this.rows-1){
this.rowindex= this.rows-1;
반환;
}
}
}
}

function getfielddata(Field){
var colindex=-1;
var i=0;
if (typeof(Field) == "숫자"){
colindex=필드;
}
else
{
for (i=0;iif (this.TableData[0][ i]==필드){
colindex=i;
휴식;
}
}
}
if (colindex!=-1) {
return this.TableData[this.rowindex][colindex];
}

}

function sort_desc(){//降序
var colindex=-1;
var highindex=-1;
desc_array=new 배열();
var i,j;
for (n=0; nField=arguments[arguments.length-1-n];
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
휴식;
}
}
if ( colindex==-1 )
return;
else
{
desc_array[0]=this.TableData[0];
for(i=1;idesc_array[i]=this.TableData[1];
하이인덱스=1;
for(j=1;jif (desc_array[i][colindex]desc_array[i ]=this.TableData[j];
하이인덱스=j;
}

}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex 1) ,this.TableData.length));
}
}

this.TableData=desc_array;
}
반환;
}

function sort_asc(){//升序
var colindex=-1;
var highindex=-1;
var i,j;
for (n=0; nasc_array=new Array();
필드=인수[arguments.length-1-n];
for (i=0;iif (this.TableData[0][i]==Field){
colindex=i;
휴식;
}
}
if ( colindex==-1 )
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;iasc_array[i]=this.TableData[1];
하이인덱스=1;
for(j=1;jif (asc_array[i][colindex]>this.TableData[j][colindex] ){
asc_array[i]=this.TableData[j];
하이인덱스=j;

}

}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice (highindex 1,this.TableData.length));

}
}

this.TableData=asc_array;
}
반환;
}

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

GetData=새로운 배열();
if (typeof(Field)=="정의되지 않음" || typeof(FieldValue)=="정의되지 않음" ){
return this.TableData;
}

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

for(i=1;iif (this.TableData[ i][colindex]==FieldValue){
GetData[i]=new Array();
GetData[i]=this.TableData[i];
}
}
}
GetData를 반환합니다.
}
함수 삭제(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex 1,this.TableData.length) )));
this.rows=this.TableData.length;
반환;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "숫자"){
colindex=필드;
}
else
{
for (i=0;iif (this.TableData[0][ i]==필드){
colindex=i;
휴식;
}
}
}
if (colindex!=-1) {
this.TableData[this.rowindex][colindex]=FieldValue;
}

}
function movefirst(){
this.rowindex=0;
}
함수 movelast(){
this.rowindex=this.rows-1;
}
함수 String.prototype.Trim() {return this.replace(/(^s*)|(s*$)/g,"");}
GetTableData.prototype.MoveNext = 다음으로 이동;
GetTableData.prototype.GetFieldData = getfielddata;
GetTableData.prototype.Sort_asc = sort_asc;
GetTableData.prototype.Sort_desc = sort_desc;
GetTableData.prototype.GetData = getData;
GetTableData.prototype.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 != ' 버튼' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}

있음
//===============================시작=============== =================

测试修改表格

/*提示层的样式*/

<script>  </script>

<script>  </script>
onclick="editerTableCell('editer_table','no_editer')">

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

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

성명：

이전 기사：js를 사용하여 웹 페이지의 데스크탑 오른쪽 클릭 메뉴_탐색 메뉴를 모방합니다.다음 기사：js를 사용하여 웹 페이지의 데스크탑 오른쪽 클릭 메뉴_탐색 메뉴를 모방합니다.

B/S 개발에서 자주 사용되는 JavaScript 기술 및 코드_javascript 기술

관련 기사