Commonly used javaScript technologies for b/s development_form effects

JavaScript technology often used in b/s development
1. Verification class
1. Digital verification
1.1 Integer
1.2 Integer greater than 0 (used for the passed ID Verification)
1.3 Verification of negative integers
1.4 The integer cannot be greater than iMax
1.5 The integer cannot be less than iMin
2. Time class
2.1 Short time, shaped like (13:04:06)
2.2 Short date, in the shape of (2003-12-05)
2.3 Long time, in the shape of (2003-12-05 13:04:06)
2.4 Only year and month. In the form of (2003-05, or 2003-5)
2.5 Only hours and minutes, in the form of (12:03)
3. Form class
3.1 All form values ​​cannot be empty
3.2 The value of the multi-line text box cannot be empty.
3.3 The value of the multi-line text box cannot exceed sMaxStrleng
3.4 The value of the multi-line text box cannot be less than sMixStrleng
3.5 Determine whether the radio button is selected.
3.6 Determine whether the check box is selected.
3.7 Select all check boxes, multiple selections, unselect all, inverse selection
3.8 Determine the file type during file uploading
4. Character type
4.1 The judgment characters are all composed of letters from a-Z or A-Z
4.2 The judgment characters are composed of letters and numbers.
4.3 Judgment characters are composed of letters, numbers, underscores, and dots. The beginning can only be an underscore and a letter
4.4 String replacement function.Replace();
5. Browser class
5.1 Determine the browser type
5.2 Determine the ie version
5.3 Determine the resolution of the client

6. Combined class
6.1 Determine email.
6.2 Verification of mobile phone number
6.3 Verification of ID card
2. Functional category
1. Time and related controls
1.1 Calendar
1.2 Time control
1.3 Perpetual calendar
1.4 Display the dynamic display clock effect (text, such as time in OA)
1.5 Display the dynamic display clock effect (image, like a watch)
2. Form class
2.1 Automatically generate the form
2.2 Dynamic Add, modify, and delete elements in the drop-down box
2.3 Drop-down box where content can be entered
2.4 Only iMax text can be entered in the multi-line text box. If you input too much, it will be automatically reduced to iMax text (mostly used for sending text messages)

3. Print class
3.1 Print control
4. Event class
4.1 Shield right click
4.2 Block all function keys
4.3 --> and <-- F5 F11, F9, F1
4.4 Block key combination ctrl N
5. Web design
5.1 Continuous scrolling text and pictures (Note that it is continuous, there is no blank space between the two paragraphs of text and pictures)
5.2 HTML editing control class
5.3 Color selection box control
5.4 Drop-down menu
5.5 Two-level or multi-level drop-down menu
5.6 Buttons imitating IE menu. (The effect is like the navigation column of rongshuxa.com)
5.7 Dynamic effects of status bar and title bar (there are many examples, you can study them)
5.8 After double-clicking, the web page automatically scrolls
6. Tree structure.
6.1 asp SQL version
6.2 asp xml sql version
6.3 java sql or java sql xml
7. Production of borderless effect
8. Linked drop-down box technology
9. Text sorting


1. Verification type
1. Numeric verification
1.1 Integer
/^(-| )?d $/.test(str)
1.2 An integer greater than 0 (used for verification of the passed ID)
/^d $/.test(str)
1.3 Verification of negative integers
/^-d $/.test(str)
2. Time class
2.1 Short time, in the form of (13:04:06)
function isTime(str)
{
var a = str.match(/^(d{1 ,2})(:)?(d{1,2})2(d{1,2})$/);
if (a == null) {alert('The input parameter is not in time format' ); return false;}
if (a[1]>24 || a[3]>60 || a[4]>60)
{
alert("The time format is incorrect ");
          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("The number of digits entered is incorrect!"); 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];
                                                                      The date of birth in the ID number " a[0] " is incorrect! "); return false;}
                                                                                                                        Select, unselect all, inverse selection

Select all










< ;br/>


Select all












< ;/form>



3.8 Determining the file type during file upload


Draw:

<SCRIPT> <br> S.DrawingSurface.ArcDegrees(0,0,0,30,50,60); <br>S.DrawingSurface.ArcRadians(30,0,0,30,50,60); <br>S.DrawingSurface.Line( 10,10,100,100); <br></SCRIPT>

Write the registry:
<SCRIPT> <br>var WshShell = WScript.CreateObject("WScript.Shell"); <br> WshShell.RegWrite ("HKCU\Software\ACME\FortuneTeller\", 1, "REG_BINARY"); <br>WshShell.RegWrite ("HKCU\Software\ACME\FortuneTeller\MindReader", "Goocher!", "REG_SZ") ; <br>var bKey = WshShell.RegRead ("HKCU\Software\ACME\FortuneTeller\"); <br>WScript.Echo (WshShell.RegRead ("HKCU\Software\ACME\FortuneTeller\MindReader")); <br>WshShell.RegDelete ("HKCU\Software\ACME\FortuneTeller\MindReader"); <br>WshShell.RegDelete ("HKCU\Software\ACME\FortuneTeller\"); <br>WshShell.RegDelete ("HKCU\Software\ACME \"); <br></SCRIPT>

TABLAE related (the client dynamically adds rows and columns)





< ;TD>


< ;/BODY>


1． Strict verification of ID card:

<script> <br>var aCity={11:"Beijing",12:"Tianjin",13:"Hebei",14:"Shanxi",15:"Inner Mongolia ",21:"Liaoning",22:"Jilin",23:"Heilongjiang",31:"Shanghai",32:"Jiangsu",33:"Zhejiang",34:"Anhui",35:"Fujian", 36:"Jiangxi",37:"Shandong",41:"Henan",42:"Hubei",43:"Hunan",44:"Guangdong",45:"Guangxi",46:"Hainan",50: "Chongqing",51:"Sichuan",52:"Guizhou",53:"Yunnan",54:"Tibet",61:"Shaanxi",62:"Gansu",63:"Qinghai",64:"Ningxia ",65:"Xinjiang",71:"Taiwan",81:"Hong Kong",82:"Macau",91:"foreign"} <br><br>function cidInfo(sId){ <br> var iSum= 0 <br> var info="" <br> if(!/^d{17}(d|x)$/i.test(sId))return false; <br> sId=sId.replace(/x$ /i,"a"); <br> if(aCity[parseInt(sId.substr(0,2))]==null)return "Error: Illegal area"; <br> sBirthday=sId.substr(6, 4) "-" Number(sId.substr(10,2)) "-" Number(sId.substr(12,2)); <br> var d=new Date(sBirthday.replace(/-/g," /")) <br> if(sBirthday!=(d.getFullYear() "-" (d.getMonth() 1) "-" d.getDate()))return "Error: Illegal birthday"; <br> for(var i = 17;i>=0;i --) iSum  = (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) <br> if(iSum!=1)return "Error:非法证号"; <br> return aCity[parseInt(sId.substr(0,2))] "," sBirthday "," (sId.substr(16,1)%2?"男":"女") <br>} <br><br>document.write(cidInfo("380524198002300016"),"<br/>"); <br>document.write(cidInfo("340524198002300019"),"<br/>") <br>document.write(cidInfo("340524197711111111"),"<br/>") <br>document.write(cidInfo("34052419800101001x"),"<br/>"); <br></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))


 

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






/*--- Special Thanks For andot ---*/

/*
 This following code are designed and writen by Windy_sk 
 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(/]*)>/g,"");
 temp  = "";
 temp  = "";
 temp  = "Chromeless Window For IE6 SP1";
 temp  = "";
 temp  = "?";
 temp  = "0";
 temp  = "1";
 temp  = "x";
 temp  = "";
 temp  = "";
 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;
}




电话号码的验证

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




has the effect of not echoing non-numeric characters when entering them, that is, non-numeric characters Does not respond to input.
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;
}
}

Verify ip

str=document.RegExpDemo .txtIP.value;
if(/^(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})$/. test(str)==false)
{
window.alert('Wrong IP address format');
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('Wrong IP address');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//Eliminate the 0 in front of 010.020.020.03
var str=str.replace(/0(d)/g,"$1");
str=str.replace(/0(d)/g,"$1");
window.alert( str);


//The following is the class for getting data
//Obj parameter specifies the source of the data (limited to Table), the default first line is the field name line
//GetTableData class The MoveNext method is provided. The parameter is the number of digits to move the rows of the table up or down. Positive numbers move downwards and negative numbers move upwards.
//GetFieldData method obtains the data of the specified column name
//Sort_desc method specifies The columns are arranged in descending order
//The Sort_asc method sorts the specified columns in ascending order
//The GetData method returns a data array with a field value of a specific value, providing data, which can be processed externally
// The Delete method deletes the current record and reduces the array by one row
//Initialization, Obj: name of table, Leftlen: length of excess data on the left, Rightlen: length of excess data on the right,
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(/rn/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;
}
}
}
}


function getfielddata(Field) {
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) {
  return this.TableData[this.rowindex][colindex];
  }

}

 

function sort_desc(){//降序
 var colindex=-1;
 var highindex=-1;
 desc_array=new Array();
 var i,j;
for (n=0; n Field=arguments[arguments.length-1-n];
 for (i=0;i  if (this.TableData[0][i]==Field){
  colindex=i;
  break;
  }  
 }
   if ( colindex==-1 )
  return;
   else
  {
  desc_array[0]=this.TableData[0];
  for(i=1;i  desc_array[i]=this.TableData[1];
  highindex=1;
   for(j=1;j      if  (desc_array[i][colindex]      desc_array[i]=this.TableData[j];   
      highindex=j;
    }

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

 
 this.TableData=desc_array;
}
 return;
}

 

function sort_asc(){//升序
 var colindex=-1;
 var highindex=-1;
 var i,j;
for (n=0; n   asc_array=new Array();
   Field=arguments[arguments.length-1-n];
   for (i=0;i    if (this.TableData[0][i]==Field){
    colindex=i;
    break;
    }  
   }
   if ( colindex==-1 )
     return;
   else
     {
     asc_array[0]=this.TableData[0];
     for(i=1;i     asc_array[i]=this.TableData[1];
     highindex=1;
      for(j=1;j         if  (asc_array[i][colindex]>this.TableData[j][colindex]){ 
         asc_array[i]=this.TableData[j];   
         highindex=j;

        }

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

      }
     }

 
    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://www.php.cn/

在每个文本框的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')">
< ;TR class="TrHead">











< ;/TR>

Freely edit table
Click the Start Editing button, then click on each cell to edit	2	3
4	5	6
one	two	three
four	five	six

Please click a cell to edit!< /p>