用JavaScript脚本实现Web页面信息交互(教师园地-校本培训-实验校区)

　

用JavaScript脚本实现Web页面信息交互

　要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

一、窗体基础知识
　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

１、什么是窗体对象
窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。
<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 =信息数据传送方式(get/post)
enctype ="窗体编码方式"
[onsubmit ="JavaScript代码"]>
</Form>
　

２、窗体对象的方法
　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：
document.mytest.submit()
　
３、窗体对象的属性
　　窗体对象中的属性主要包括以下：elements name action target encoding method.
　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
elements[0].Mytable.elements[1]
　
４、访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现：
（１）通过访问窗体
　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。
（２）通过数组来访问窗体
　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗体的先决条件
　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。
　
二、窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
　
下面分别介绍：
　
１、Text单行单列输入元素
　功能：对Text标识中的元素实施有效的控制。
　基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。
Value：用以设定出现在窗口中对应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：用以设定出现在窗口中对应HTML文档中Value的信息。
Default value：元素的默认值。
　方法：
blur()：将输入焦点失去
select()：将文字加亮后
　事件：
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
　
３、Select选择元素
　功能：实施对滚动选择元素的控制。
　属性：
name:设定提交信息时的信息名称，对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性：
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
　
　事件：
OnBlur：当select选项失去焦点时，产生该文件。
onFocas:当select获得焦点时，产生该文件。
Onchange:选项状态改变后，产生该事件。
　
４、Button按钮
　功能：实施对Button按钮的控制。
　属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。
Value:用以设定出现在窗口中对应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:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
　方法：
click()该方法使得框的某一个项被选中。
　事件：
onclick:当框的选被选中时，产生该事件。 　

６、radio无线按钮
　功能：实施对一个具单选功能的无线按钮控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
　方法：
chick():选定一个按钮。
　事件：
onclick:单击按钮时，产生该事件。
　
７、hidden:隐藏
　功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。
defaleitvalue:默认值
　
８、Password口令
　功能：实施对具有口令输入的元素的控制。
　属性：
Name:设定提交信息时的信息名称，对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。
defaultvalu:默认值
　方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
　
９、submit提交元素
　功能：实施对一个具有提交功能按钮的控制。
　属性：
name:设定提交信息时的信息名称，对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。
　方法
click()相当于按下submit按钮。
　事件：
onclick()当按下该按钮时，产生该事件。
****************************************************

功    能：验证函数集合

说    明：

版    本：1.0

作    者：

创建时间：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;

}

 

//比较两个数值大小

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;

}

 

//比较两个数值大小

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;

}

 

//百分数[数字 . %]

function percentage()

{// 37 - %;

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

    {

        window.event.keyCode=0x0;

    }

}

 

//身份证[数字 x]

function identityCard()

{

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

    {

        window.event.keyCode = 0x0;

        return false;

    }

    return true;

}

 

//格式必须仅为数字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('只能输入数字！')

        window.event.keyCode = 0x0;

        return false;

    }

    return true;

}

 

//格式必须为数字和-

function numericF()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必须为数字和.

function numericD()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

    }

}

 

//格式为数字，点(.)和负号(-)

function numericDF()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

        return (false);

    }

}

 

//格式必须为数字和,

function numericB()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必须为数字.,

function numericDB()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必须为数字-,

function numericFB()

{

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

    {

        alert('只能输入数字！')

        window.event.keyCode=0x0;

    }

}

 

//格式必须为数字.-,

function numericDFB()

{

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

    {

        alert('只能输入数字！')

        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;

    }

}

 

//表单项只能为数字和"-",用于电话/银行账号验证上,可扩展到域名注册等

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;

}

 

//数值检测,只为为0－9之间的数字

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;

}

//↑↑↑//

//判断是否为数值

function checkNum(obj)

{

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

    {

        alert('非正确的数值输入!!!');

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

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

        return false;

    }

    return true;

}

 

 

//表单项输入数值/长度限定

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)// 字符串包含测试函数

{

  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人阅读　发稿日期： 2008-12-30　上传人：学森(实验校区)　【发表、查看评论】

浙江省宁海县实验小学教育集团 　　打印本页