快捷導(dǎo)航

b/s開發(fā)常用javaScript技術(shù)

更新時(shí)間：2006年09月07日 00:00:00 作者：

電話號碼的驗(yàn)證

要求：
　　(1)電話號碼由數(shù)字、"("、")"和"-"構(gòu)成
　　(2)電話號碼為3到8位
　　(3)如果電話號碼中包含有區(qū)號，那么區(qū)號為三位或四位
　　(4)區(qū)號用"("、")"或"-"和其他部分隔開
　　(5)移動電話號碼為11或12位，如果為12位,那么第一位為0
　　(6)11位移動電話號碼的第一位和第二位為"13"
　　(7)12位移動電話號碼的第二位和第三位為"13"
　　根據(jù)這幾條規(guī)則，可以與出以下正則表達(dá)式：
　　(^[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 language="java 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>
<input type=text name="iphone">
<input type=button onclick="PhoneCheck(document.all.iphone.value)" value="Check">

具有在輸入非數(shù)字字符不回顯的效果，即對非數(shù)字字符的輸入不作反應(yīng)。
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;
}
}

驗(yàn)證ip

str=document.RegExpDemo.txtIP.value;
if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false)
{
window.alert('錯(cuò)誤的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('錯(cuò)誤的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);

//一下是取數(shù)據(jù)的類
//Obj參數(shù)指定數(shù)據(jù)的來源(限定Table),默認(rèn)第一行為字段名稱行
//GetTableData類提供MoveNext方法,參數(shù)是表的行向上或向下移動的位數(shù),正數(shù)向下移動,負(fù)數(shù)向上.
//GetFieldData方法獲得指定的列名的數(shù)據(jù)
//Sort_desc方法對指定的列按降序排列
//Sort_asc方法對指定的列按升序排列
//GetData方法返回字段值為特定值的數(shù)據(jù)數(shù)組,提供數(shù)據(jù),可以在外部進(jìn)行其他處理
//Delete方法刪除當(dāng)前記錄,數(shù)組減少一行
//初始化,Obj:table的名字,Leftlen:左面多余數(shù)據(jù)長度,Rightlen:右面多余數(shù)據(jù)長度,
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<iLen;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.rows-1)
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<this.cols && this.rowindex<this.rows ;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<arguments.length; n++){
Field=arguments[arguments.length-1-n];
for (i=0;i<this.cols;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<this.rows;i++){
  desc_array[i]=this.TableData[1];
  highindex=1;
   for(j=1;j<this.TableData.length;j++){
      if  (desc_array[i][colindex]<this.TableData[j][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<arguments.length; n++){
   asc_array=new Array();
   Field=arguments[arguments.length-1-n];
   for (i=0;i<this.cols;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<this.rows;i++){
     asc_array[i]=this.TableData[1];
     highindex=1;
      for(j=1;j<this.TableData.length;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<this.cols;j++){
      if  (this.TableData[0][j]==Field){
     colindex=j;
     }
   }
   if (colindex!=-1){

   for(i=1;i<this.rows;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<this.cols && this.rowindex<this.rows ;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

在每個(gè)文本框的onblur事件中調(diào)用校驗(yàn)代碼,并且每個(gè)文本框中onKeyDown事件中寫一個(gè)enter轉(zhuǎn)tab函數(shù)

//回車鍵換為tab
function enterToTab()
{
    if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
       && event.keyCode == 13)
    {
        event.keyCode = 9;
    }
}

有時(shí)候還需要自由編輯表格---
給大家一個(gè)自由編輯表格的小例子,寫的有點(diǎn)亂,呵呵:）

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

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>測試修改表格</TITLE>
<STYLE>
/*提示層的樣式*/
div
{
  BORDER-RIGHT: #80c144 1px solid;
  BORDER-TOP: #80c144 1px solid;
  VISIBILITY: hidden;
  BORDER-LEFT: #80c144 1px solid;
  CURSOR: default;
  LINE-HEIGHT: 20px;
  BORDER-BOTTOM: #80c144 1px solid;
  FONT-FAMILY: 宋體;
  font-size:12px;
  POSITION: absolute;
  BACKGROUND-COLOR: #f6f6f6;
  TOP:30px;
  LEFT:30px;
}
/*tr的樣式*/
tr
{
    font-family: "宋體";
    color: #000000;
    background-color: #C1DBF5;
    font-size: 12px
}
/*table腳注樣式*/
.TrFoot
{
    FONT-SIZE: 12px;
    font-family:"宋體", "Verdana", "Arial";
    BACKGROUND-COLOR: #6699CC;
    COLOR:#FFFFFF;
    height: 25;
}
/*trhead屬性*/
.TrHead
{
    FONT-SIZE: 13px;
    font-family:"宋體", "Verdana", "Arial";
    BACKGROUND-COLOR: #77AADD;
    COLOR:#FFFFFF;
    height: 25;
}
/*文本框樣式*/
INPUT
{
    BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    FONT-SIZE: 12px;
    FONT-FAMILY: "宋體","Verdana";
    color: #000000;
    BACKGROUND-COLOR: #E9EFF5;
}
/*button樣式*/
button
{
    BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
    BACKGROUND-COLOR: #D5E4F3;
    CURSOR: hand;
    FONT-SIZE:12px;
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    COLOR: #000000;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language = "java script">

</SCRIPT>

<SCRIPT language = "java script">

</SCRIPT>
<TABLE id="editer_table" width="100%" align="center"
    onclick="editerTableCell('editer_table','no_editer')">
    <TR class="TrHead">
  <TD colspan="3" align="center" id="no_editer">自由編輯表格</TD>
</TR>
<TR>
  <TD width="33%">單擊開始編輯按鈕,然后點(diǎn)擊各單元格編輯</TD>
  <TD width="33%">2</TD>
  <TD width="33%">3</TD>
</TR>
<TR>
  <TD width="33%">4</TD>
  <TD width="33%">5</TD>
  <TD width="33%">6</TD>
</TR>
<TR>
  <TD width="33%">one</TD>
  <TD width="33%">two</TD>
  <TD width="33%">three</TD>
</TR>
<TR>
  <TD width="33%">four</TD>
  <TD width="33%">five</TD>
  <TD width="33%">six</TD>
</TR>
    <TR class="TrFoot">
  <TD colspan="3" align="center" id="no_editer">
   <INPUT type="button" class="bt" value="開始編輯" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';">
  </TD>
</TR>
</TABLE>
</BODY>
<DIV id="editTip">請單擊某個(gè)單元格進(jìn)行編輯!</DIV>
</HTML>

您可能感興趣的文章: