用JavaScript腳本實現(xiàn)Web頁面信息交互

　要實現(xiàn)動態(tài)交互，必須掌握有關窗體對象(Form)和框架對象(Frames)更為復雜的知識。

一、窗體基礎知識
　　窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數(shù)據(jù)輸入，就可以實現(xiàn)動態(tài)改變Web文檔的行為。

１、什么是窗體對象
窗體（Form）:它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>

　　在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。
　　窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：
<Form
Name ="表的名稱"
Target ="指定信息的提交窗口"
action ="接收窗體程序對應的URL"
Method =信息數(shù)據(jù)傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
　

２、窗體對象的方法
　　窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式：
document.mytest.submit()
　
３、窗體對象的屬性
　　窗體對象中的屬性主要包括以下：elements name action target encoding method.
　　除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態(tài)，這通常是單個窗體標識；而elements常常是多個窗體元素值的數(shù)組，例：
elements[0].Mytable.elements[1]
　
４、訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實現(xiàn)：
（１）通過訪問窗體
　　在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。
（２）通過數(shù)組來訪問窗體
　　除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標是由0到n。所以可通過下列格式實現(xiàn)窗體對象的訪問：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗體的先決條件
　　在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創(chuàng)建窗體，并將定義窗體部分放在引用之前。
　
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數(shù)組下標或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName (窗體名.元素名或數(shù)組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)
　
下面分別介紹：
　
１、Text單行單列輸入元素
　功能：對Text標識中的元素實施有效的控制。
　基本屬性：
Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。
Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。
defaultvalue：包括Text元素的默認值
　基本方法：
blur()：將當前焦點移到后臺。
select()：加亮文字。
　主要事件：
onFocus：當Text獲得焦點時，產生該事件。
OnBlur：從元素失去焦點時，產生該事件。
Onselect：當文字被加亮顯示后，產生該文件。
onchange：當Text元素值改變時，產生該文件。
例：...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
　

２、textarea多行多列輸入元素
　功能：實施對Textarea中的元素進行控制。
　基本屬性
name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。
Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。
Default value：元素的默認值。
　方法：
blur()：將輸入焦點失去
select()：將文字加亮后
　事件：
onBlur:當失去輸入焦點后產生該事件
onFocus:當輸入獲得焦點后，產生該文件
Onchange:當文字值改變時，產生該事件
Onselect:當文字加亮后，產生該文件
　
３、Select選擇元素
　功能：實施對滾動選擇元素的控制。
　屬性：
name:設定提交信息時的信息名稱，對應文檔select中的name。
Length:對應文檔select中的length
options:組成多個選項的數(shù)組
selectIndex;該下標指明一個選項
select在中每一選項都含有以下屬性：
Text:選項對應的文字
selected:指明當前選項是否被選中
Index:指明當前選項的位置
defaultselected:默認選項
　
　事件：
OnBlur：當select選項失去焦點時，產生該文件。
onFocas:當select獲得焦點時，產生該文件。
Onchange:選項狀態(tài)改變后，產生該事件。
　
４、Button按鈕
　功能：實施對Button按鈕的控制。
　屬性：
Name:設定提交信息時的信息名稱，對應文檔中button的Name。
Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。
　方法：
click()該方法類似于一個按下的按鈕。
　事件：
onclick當單擊button按鈕時，產生該事件。
例 ：
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過元素訪問
或
document.testcallvalue="mytest"; // 通過名字訪問
</script>
.....

　
５、checkbox檢查框
　功能：實施對一個具有復選框中元素的控制。
　屬性：
name:設定提交信息時的信息名稱。
Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。
Checked:該屬性指明框的狀態(tài)true/false.
defauitchecked:默認狀態(tài)
　方法：
click()該方法使得框的某一個項被選中。
　事件：
onclick:當框的選被選中時，產生該事件。 　

６、radio無線按鈕
　功能：實施對一個具單選功能的無線按鈕控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同
value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。
length:單選按鈕中的按鈕數(shù)目。
defalechecked:默認按鈕。
checked:指明選中還是沒有選中。
index:選中的按鈕的位置。
　方法：
chick():選定一個按鈕。
　事件：
onclick:單擊按鈕時，產生該事件。
　
７、hidden:隱藏
　功能：實施對一個具有不顯示文字并能輸入字符的區(qū)域元素的控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。
Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。
defaleitvalue:默認值
　
８、Password口令
　功能：實施對具有口令輸入的元素的控制。
　屬性：
Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。
Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。
defaultvalu:默認值
　方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。
focus():獲得password輸入焦點。
　
９、submit提交元素
　功能：實施對一個具有提交功能按鈕的控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔中submit。
Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。
　方法
click()相當于按下submit按鈕。
　事件：
onclick()當按下該按鈕時，產生該事件。
****************************************************

功    能：驗證函數(shù)集合

說    明：

版    本：1.0

作    者：

創(chuàng)建時間：2007-8-31

***************************************************

*/

 

<!--

//禁止輸入空格

function forbidSpace()

{

    //onkeypress="forbidSpace();"

    if (window.event.keyCode==32)

    {

        alert('不允許輸入空格！');

        window.event.keyCode = 0x0;

    }

}

 

//去除字符串空格

function trim(s)

{           

    return s.replace(/(^\s+)|(\s+$)/g,"");

}

 

//表單項是否為空

function IsEmpty(pstr)

{

    //alert(pstr)

    if (trim(pstr).length == 0)

    {

        return true;

    }

    return false;

}

 

//比較兩個表單項的值是否相同

function IsRepeat(obj1, obj2)

{

    if ((obj1).value != (obj2).value)

    {

       return false;

    }

    return true;

}

 

//比較兩個數(shù)值大小

function CompairNum(value1,value2)

{

    var ret;

    ret=eval(value1-value2);   

    if(ret>0 || isNaN(value1) || (value1.charAt(0)==0 && !isNaN(value1.charAt(1)) && value1.charAt(1)!='') )

    {

        alert('輸入有誤！');

        return false;

    }

    return true;

}

 

//比較兩個數(shù)值大小

function CompairNum2(value1,value2,note)

{

    var ret;

    //alert(value1);

    ret=eval(value1-value2);   

    if(ret>0 || isNaN(value1) || (value1.charAt(0)==0 && !isNaN(value1.charAt(1)) && value1.charAt(1)!='') )

    {

        alert(note);

        return false;

    }

    return true;

}

 

//百分數(shù)[數(shù)字 . %]

function percentage()

{// 37 - %;

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==46||window.event.keyCode==37))

    {

        window.event.keyCode=0x0;

    }

}

 

//身份證[數(shù)字 x]

function identityCard()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==120))

    {

        window.event.keyCode = 0x0;

        return false;

    }

    return true;

}

 

//格式必須僅為數(shù)字0-9

function onlyNumeric()

{// 0-9:48-57;-:45;

    //var outCha="40 41 45 59";

    if(window.event.keyCode<48||window.event.keyCode>57)

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode = 0x0;

        return false;

    }

    return true;

}

 

//格式必須為數(shù)字和-

function numericF()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==45))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必須為數(shù)字和.

function numericD()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==46))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

 

//格式為數(shù)字，點(.)和負號(-)

function numericDF()

{

    if(!((window.event.keyCode>47&&window.event.keyCode<58)||window.event.keyCode==46||window.event.keyCode==45))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

        return (false);

    }

}

 

//格式必須為數(shù)字和,

function numericB()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==44))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必須為數(shù)字.,

function numericDB()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==44||window.event.keyCode==46))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必須為數(shù)字-,

function numericFB()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==44||window.event.keyCode==45))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必須為數(shù)字.-,

function numericDFB()

{

    if(!(window.event.keyCode>47&&window.event.keyCode<58||window.event.keyCode==46||window.event.keyCode==44||window.event.keyCode==45))

    {

        alert('只能輸入數(shù)字！')

        window.event.keyCode=0x0;

    }

}

//[127以內ASCII值] 非大小寫26個英文字母

function noLetter()

{

    if ((window.event.keyCode>=65 && window.event.keyCode<=90)||(window.event.keyCode>=97&&window.event.keyCode<=122)||window.event.keyCode>127)

    {

        window.event.keyCode=0x0;

    }

}

 

//表單項只能為數(shù)字和"-",用于電話/銀行賬號驗證上,可擴展到域名注冊等

function IsNumberF(String)

{

    var Letters = "1234567890-"; //可以自己增加可輸入值

    var i;

    var c;

    if(String.charAt( 0 )=='-')

        return false;

    if( String.charAt( String.length - 1 ) == '-' )

        return false;

    for( i = 0; i < String.length; i ++ )

    {

        c = String.charAt( i );

        if (Letters.indexOf( c ) < 0)

        return false;

    }

    return true;

}

 

//數(shù)值檢測,只為為0－9之間的數(shù)字

function IsNumber(name)

{

    if(name.length == 0)

        return false;

    for(i = 0; i < name.length; i++)

    {

        if(name.charAt(i) < "0" || name.charAt(i) > "9")

        return false;

    }

    return true;

}

 

//Digit evaluation function

function isNum(passedVal)

{

    if (passedVal == "")

        return false;

    else if (isNaN(passedVal))   

        return false;

       

    for (i=0; i<passedVal.length; i++)

    {

        if (passedVal.charAt(0) == "." || passedVal.charAt(passedVal.length-1) == "." || (passedVal.length > 1 && passedVal.charAt(0) == "0" && !isNaN(passedVal.charAt(1))))

            return false;

       

        else if (passedVal.charAt(0) == "-")

            i++;           

        else if (passedVal.charAt(i) < "0" && passedVal.charAt(i) != ".")

            return false;

        else if (passedVal.charAt(i) > "9" && passedVal.charAt(i) != ".")

            return false;

    }

    return true;

}

//↑↑↑//

//判斷是否為數(shù)值

function checkNum(obj)

{

    if (isNum(document.all(''+ obj +'').value)==false)

    {

        alert('非正確的數(shù)值輸入!!!');

        document.all(''+ obj +'').focus();

        document.all(''+ obj +'').select();

        return false;

    }

    return true;

}

 

 

//表單項輸入數(shù)值/長度限定

function Limit(obj, min, max)

{

    if ((obj).length > max || (obj).length < min)

    {

        return false;

    }

    return true;

}

 

//英文值檢測

function isEnglish(name)

{

    if(name.length == 0)

        return false;

    for(i = 0; i < name.length; i++)

    {

        if(name.charCodeAt(i) > 128)

        return false;

    }

    return true;

}

 

//中文值檢測

function isChinese(name)

{

    if(name.length == 0)

        return false;

    for(i = 0; i < name.length; i++)

    {

        if(name.charCodeAt(i) > 128)

        return true;

    }

    return false;

}

 

//限定表單項不能輸入的字符

function contain(str,charset)// 字符串包含測試函數(shù)

{

  var i;

  for(i=0;i<charset.length;i++)

  if(str.indexOf(charset.charAt(i))>=0)

  return true;

  return false

}

資料引用:http://www./442102.html

 

function xswz()
{
     if(document.forms[0].elements[0].value.length==0)
     { alert("姓名不可以為空");
     document.forms[0].elements[0].focus();
     return false;
    }
    else if(document.forms[0].elements[0].value.length!=document.forms[0].elements[1].value)
     { alert("密碼不可以為空");
     document.forms[0].elements[0].focus();
      return false;
    }else {return true;}
   }

　

本文已被39人閱讀　發(fā)稿日期： 2008-12-30　上傳人：學森(實驗校區(qū))　【發(fā)表、查看評論】

浙江省寧海縣實驗小學教育集團 　　打印本頁