ACCP V4.0
第十章处理表单和表单元素事件
ACCP V4.02
回顾
常用的浏览器对象有哪些？
希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用 window对象的哪个方法？
history对象的哪个方法相当于 IE浏览器中的后退按钮？
希望动态改变网页的背景色，应使用哪个对象的 bgColor
属性？
IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息
ACCP V4.03
目标
使用与以下各项关联的事件处理程序,
文本框
文本区域
命令按钮
复选框
单选按钮
组合框
编写用于验证表单的 JavaScript 代码
ACCP V4.04
事件处理程序和表单元素简介 2-1
<INPUT type=“button” value=“注册 "
onClick="button_click()">
当事件发生时，将执行与之相关的 JavaScript 代码当发生特定事件时，事件处理程序指定要执行哪 些
JavaScript 代码
ACCP V4.05
事件处理程序和表单元素简介 2-2
当用户单击“注册”按钮时，将弹出一条消息。
<SCRIPT LANGUAGE = "JavaScript">
function button_click()
{
alert(“请向本网站注册 );
}
</SCRIPT>
<INPUT type=“button” value=“注册“
onClick="button_click()">
ACCP V4.06
文本框对象
文本框元素用于在表单中输入字、词或一系列数字
可以通过将 HTML 的 INPUT 标签中的 type 设置为,text”，以创建文本框元素
<INPUT type="text" name="t1">
ACCP V4.07
文本框对象 –
事件处理程序文本框事件 onBlur 文本框失去焦点
onChange 文本框的值被修改
onFocus 光标进入文本框中方法 focus( ) 获得焦点,即获得鼠标光标
select( ) 选中文本内容，突出显示输入区域属性 readonly 只读，文本框中的内容不能修改
ACCP V4.08
文本框对象
card
price
number
tot
myform
ACCP V4.09
文本框对象添加无边框样式
ACCP V4.010
文本框对象 - onChange
事件处理程序
<SCRIPT language="JavaScript" >
function clearText( )
{
if (document.myform.card.value=="输入您的会员帐号 ")
document.myform.card.value="" ;
}
function check( )
{
var a=document.myform.card.value;
if (a.substr(0,2)!="10" || isNaN(a))
{
alert("格式错误，请重新输入 ") ;
document.myform.card.focus( );
document.myform.card.select( );
}
}
function compute( )
{
var price= document.myform.price.value;
var number= document.myform.number.value ;
document.myform.tot.value= price*number;
}
onFocus事件调用的函数 clearText（） 清空帐号文本框中的内容
onBlur事件调用的函数 check（）检查输入的帐号是否是,10”打头，并且是数字
onChange事件调用的函数 compute( )用来计算总价
ACCP V4.011
文本框对象
<BODY>
<FORM name="myform">
.......
<TD>帐号：
<INPUT name ="card" onFocus="clearText( ),onBlur="check( )"
type = text value="输入您的会员帐号,></TD>
.......
<TD>单价：
<INPUT name ="price" type = text value="25.00” readonly >￥ </TD>
.......
<TD>数量：
<INPUT name ="number" onChange="compute( ),type = text >个 </TD>
<TD>总价：
<INPUT name ="tot" type = text value="0.00" >￥ </TD>
.......
</BODY>
帐号文本框添加 onFocus和
onBlur焦点事件价格只读属性数量文本框添加 onChange事件
ACCP V4.012
命令按钮对象
命令按钮对象是网页中最常用的元素之一
<INPUT type="submit" name="button1" value="提交 ">
<INPUT type="reset" name="button2" value="重置 ">
<INPUT type="button" name="button3" value="计算 ">
ACCP V4.013
“按钮 - 事件处理程序表单元素 事件处理程序 说明命令按钮 onSubmit 表单提交事件，单击“提交”按钮时产生，此事件属于 <FORM>元素，不属于提交按钮
onClick 按钮单击事件
onSubmit事件处理代码：
<FORM onSubmit=”return 调用函数名” >…</FORM>
如果函数返回 true，则向远程服务器提交表单；
如果函数返回 false，则取消提交。
ACCP V4.014
命令按钮事件处理程序
userName
pass1
pass2
type=reset
type=submit
myform
ACCP V4.015
命令按钮对象function check( ){var userName= document.myform.userName.value;
var pass1= document.myform.pass1.value;
var pass2=document.myform.pass2.value;
if (pass1==pass2)
{
if (pass1.length!=0)
{
document.write("<H2>恭喜您，注册成功！欢迎
"+userName+"光临！ </H2>");
return true;
}
else
{
alert("密码不能为空！ \n请输入密码 ");
return false;
}
}
else
{
alert("确认码必须和输入的密码相同！ ");
return false;
}
}
<BODY>
<FORM name="myform" onSubmit="return check( )" >
onSubmit事件调用的函数：输入数据检查如果输入格式正确，返回
true，提交表单信息；
如果格式错误，返回 false，
取消提交，提醒用户重填
ACCP V4.016
复选框对象
当用户需要在选项列表中选择多项时，可以使用复选框对象
要创建复选框对象，请使用 <INPUT> 标签请选择您的爱好
<INPUT type=“checkbox” value=“电影,> 电影
<INPUT type=“checkbox” value=“电影,> 电影
ACCP V4.017
复选框 - 事件处理程序复选框
·
事件 onBlur 复选框失去焦点
onFocus 复选框获得焦点
onClick 复选框被选定或取消选定属性 checked 复选框是否被选中，选中为 true，未选中为 false。
您可以使用此属性查看复选框的状态或设置复选框是否被选中
value 设置或获取复选框的值
ACCP V4.018
复选框 - 事件处理程序
checkbox1 checkbox2 checkbox3
设置复选框的值
checkbox4
myform
ACCP V4.019
复选框 - 事件处理程序
<HEAD>
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
if (document.myform.checkbox1.checked==true) //如果被选中
s=s+document.myform.checkbox1.value+“\n”;//累计选中的商品
if (document.myform.checkbox2.checked==true)
s=s+document.myform.checkbox2.value+"\n";
if (document.myform.checkbox3.checked==true)
s=s+document.myform.checkbox3.value+"\n";
if (document.myform.checkbox4.checked==true)
s=s+document.myform.checkbox4.value+"\n";
// if(confirm("您定购了以下物品，确定吗？,\n"+s)==true)
document.write("您定购了以下物品,<PRE>"+s+"</PRE>");
}
</SCRIPT>
单击”成交“按钮调用的函数：
检查每个复选框的选中情况，
累计用户选中的商品
<PRE>是为了原样显示字符串中的换行” \n”格式
<INPUT type="button" value=" 成 交 >> " onClick="buy( )“>
ACCP V4.020
复选框 - 事件处理程序
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
for (var i=0;i< document.myform.mybox.length;i++)
{
//判断第 i个复选框是否被选中
if (document.myform.mybox[i].checked==true)
s=s+document.myform.mybox[i].value+"\n";
}
if(confirm("您准备购买以下物品，确定吗？,\n"+s)==true)
document.write("您购买了以下物品,<PRE>"+s+"</PRE>");
}
</SCRIPT>
//… 其他代码略
<INPUT name="mybox" type="checkbox" id="mybox" value="国服魔兽金币 ">
//… 其他代码略
2.使用数组和 for循环大大简化代码
1.修改每个复选框的名称都为 mybox，使这 4个复选框构成一个数组 mybox
ACCP V4.021
单选按钮对象
当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象
要创建单选按钮对象，请使用 <INPUT> 标签
<INPUT type=“radio” value=“M”>男
<INPUT type=“radio” value=“F”>女
ACCP V4.022
单选按钮 - 事件和属性单选按钮
·
事件 onBlur 单选按钮失去焦点
onFocus 单选按钮获得焦点
onClick 单选按钮 被选定或取消选定属性 checked 单选按钮是否被选中，选中为 true，未选中为
false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中
value 设置或获取单选按钮的值
ACCP V4.023
单选按钮 -事件处理程序为了保证单选，两个单选按钮的名称都为 myradio,组成了 myradio数组
ACCP V4.024
单选按钮－事件处理程序
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
for (var i=0;i< document.myform.mybox.length;i++)
{
//判断第 i个复选框是否被选中
if (document.myform.mybox[i].checked==true)
s=s+document.myform.mybox[i].value+"\n";
}
//判断买家选项是否选中
if (document.myform.myradio[0].checked==true)
{
if(confirm("您准备 买进 以下物品，确定吗？,\n"+s)==true)
document.write("您买进了以下物品,<PRE>"+s+"</PRE>");
}
else
{
if (confirm("您准备 卖出 下物品，确定吗？,\n"+s)==true)
document.write("您卖出了以下物品,<PRE>"+s+"</PRE>");
}
}
根据用户是买家还是卖家，
弹出不同的确认信息框判断是否选中第一个单选按钮 (买家 )
ACCP V4.025
下拉列表框
<SELECT name="myselect" >
<OPTION>--请选择开户帐号的城市 --</OPTION>
<OPTION value="北京市 ">北京市 </OPTION>
<OPTION value="上海市 ">上海市 </OPTION>
<OPTION value="重庆市 ">重庆市 </OPTION>
<OPTION value="天津市 ">天津市 </OPTION>
<OPTION value="四川省 ">四川省 </OPTION>
<OPTION value="山东省 ">山东省 </OPTION>
<OPTION value="湖北省 ">湖北省 </OPTION>
</SELECT>
ACCP V4.026
下拉列表框 -事件和属性下拉列表框事件
onBlur 下拉列表框失去焦点
onChange 当选项发生改变时产生
onFocus 下拉列表框获得焦点属性
value 下拉列表框中，被选选项的值
options 所有的选项组成一个数组,options
表示整个选项数组，第一个选项即为 options[0]，第二个即为 options[1]，
其他以此类推
selectedIndex 返回被选择的选项的索引号，如果选中第一个返回 0，第二个返回 1，
其他类推
options
选项数组
options[0]
options[1]
selectedIndex属性：
表示被选中的索引号,3
value属性：被选中选项的值
ACCP V4.027
下拉列表框 -事件处理程序
ACCP V4.028
下拉列表框 - 事件处理程序
userName
myselect
mycitymyform
ACCP V4.029
下拉列表框 - 事件处理程序<SCRIPT language="JavaScript" >function myfun1( )
{
var d=document.myform.myselect.selectedIndex;
if (d==1 || d==2 || d==3 || d==4) // 北京、上海、重庆、天津
document.myform.city.value=
document.myform.myselect.options[d],text ;
}
function myfun2( )
{
var userName=document.myform.userName.value;
var province=document.myform.myselect.value ;
var city=document.myform.city.value ;
document.write("<body bgColor=#FFFAEB>");
document.write("<H2>您的注册信息如下,</H2>");
document.write("<HR>");
document.write("<P>姓名,"+userName);
document.write("<P>帐号开户省份,"+province);
document.write("<P>帐号开户城市,"+city);
}
</SCRIPT>
<SELECT name="myselect" onChange="myfun1( )">
…….
<IMG src="reg.bmp" onClick="myfun2( )">
下拉列表框 onChange事件调用的函数：判断选择的省份是否是直辖市单击”快速注册“图片时调用的函数
myfun2( )，显示注册信息
ACCP V4.030
表单验证 2-1
JavaScript 最常见的用法之一就是验证表单
对于检查用户输入是否存在错误和是否疏漏了必选项,JavaScript 是一种十分便捷的方法
ACCP V4.031
表单验证 2-2
<SCRIPT LANGUAGE="JavaScript">
function validate( )
{
var f=document.reg_form;
if(f.uname.value=="")
{
alert("请输入姓名 ");
f.uname.focus();
return false;
}
if (f.gender[0].checked==false && f.gender[1].checked==false)
{
alert("请指定性别 ");
f.gender[0].focus();
return false;
}
if ((f.password.value.length < 6) || (f.password.value == ""))
{
alert("请输入至少 6 个字符的密码！ ");
f.password.focus();
return false;
}
检查姓名检查性别检查密码
ACCP V4.032
表单验证 2-2
q=f.email.value.indexOf("@");
if (q==-1)
{
alert("请输入有效的电子邮件地址 ");
f.email.focus();
return false;
}
if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value))
{
alert("请输入有效的年龄！ ");
f.age.focus();
return false;
}
}
</SCRIPT>
<FORM name="reg_form" onSubmit="return validate()"
action="submit.htm">
检查邮件地址检查年龄
ACCP V4.033
总结
OnBlur,onChange 和 OnFocus 是一些与表单对象 相关的事件处理程序
在浏览器窗口中，如果文本框获得焦点，则会调用
onFocus 事件处理程序
当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序
当修改文本框内容或改写下拉列表框的选项时,则会调用
onChange 事件处理程序
JavaScript的主要功能之一是用于表单验证
第十章处理表单和表单元素事件
ACCP V4.02
回顾
常用的浏览器对象有哪些？
希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用 window对象的哪个方法？
history对象的哪个方法相当于 IE浏览器中的后退按钮？
希望动态改变网页的背景色，应使用哪个对象的 bgColor
属性？
IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息
ACCP V4.03
目标
使用与以下各项关联的事件处理程序,
文本框
文本区域
命令按钮
复选框
单选按钮
组合框
编写用于验证表单的 JavaScript 代码
ACCP V4.04
事件处理程序和表单元素简介 2-1
<INPUT type=“button” value=“注册 "
onClick="button_click()">
当事件发生时，将执行与之相关的 JavaScript 代码当发生特定事件时，事件处理程序指定要执行哪 些
JavaScript 代码
ACCP V4.05
事件处理程序和表单元素简介 2-2
当用户单击“注册”按钮时，将弹出一条消息。
<SCRIPT LANGUAGE = "JavaScript">
function button_click()
{
alert(“请向本网站注册 );
}
</SCRIPT>
<INPUT type=“button” value=“注册“
onClick="button_click()">
ACCP V4.06
文本框对象
文本框元素用于在表单中输入字、词或一系列数字
可以通过将 HTML 的 INPUT 标签中的 type 设置为,text”，以创建文本框元素
<INPUT type="text" name="t1">
ACCP V4.07
文本框对象 –
事件处理程序文本框事件 onBlur 文本框失去焦点
onChange 文本框的值被修改
onFocus 光标进入文本框中方法 focus( ) 获得焦点,即获得鼠标光标
select( ) 选中文本内容，突出显示输入区域属性 readonly 只读，文本框中的内容不能修改
ACCP V4.08
文本框对象
card
price
number
tot
myform
ACCP V4.09
文本框对象添加无边框样式
ACCP V4.010
文本框对象 - onChange
事件处理程序
<SCRIPT language="JavaScript" >
function clearText( )
{
if (document.myform.card.value=="输入您的会员帐号 ")
document.myform.card.value="" ;
}
function check( )
{
var a=document.myform.card.value;
if (a.substr(0,2)!="10" || isNaN(a))
{
alert("格式错误，请重新输入 ") ;
document.myform.card.focus( );
document.myform.card.select( );
}
}
function compute( )
{
var price= document.myform.price.value;
var number= document.myform.number.value ;
document.myform.tot.value= price*number;
}
onFocus事件调用的函数 clearText（） 清空帐号文本框中的内容
onBlur事件调用的函数 check（）检查输入的帐号是否是,10”打头，并且是数字
onChange事件调用的函数 compute( )用来计算总价
ACCP V4.011
文本框对象
<BODY>
<FORM name="myform">
.......
<TD>帐号：
<INPUT name ="card" onFocus="clearText( ),onBlur="check( )"
type = text value="输入您的会员帐号,></TD>
.......
<TD>单价：
<INPUT name ="price" type = text value="25.00” readonly >￥ </TD>
.......
<TD>数量：
<INPUT name ="number" onChange="compute( ),type = text >个 </TD>
<TD>总价：
<INPUT name ="tot" type = text value="0.00" >￥ </TD>
.......
</BODY>
帐号文本框添加 onFocus和
onBlur焦点事件价格只读属性数量文本框添加 onChange事件
ACCP V4.012
命令按钮对象
命令按钮对象是网页中最常用的元素之一
<INPUT type="submit" name="button1" value="提交 ">
<INPUT type="reset" name="button2" value="重置 ">
<INPUT type="button" name="button3" value="计算 ">
ACCP V4.013
“按钮 - 事件处理程序表单元素 事件处理程序 说明命令按钮 onSubmit 表单提交事件，单击“提交”按钮时产生，此事件属于 <FORM>元素，不属于提交按钮
onClick 按钮单击事件
onSubmit事件处理代码：
<FORM onSubmit=”return 调用函数名” >…</FORM>
如果函数返回 true，则向远程服务器提交表单；
如果函数返回 false，则取消提交。
ACCP V4.014
命令按钮事件处理程序
userName
pass1
pass2
type=reset
type=submit
myform
ACCP V4.015
命令按钮对象function check( ){var userName= document.myform.userName.value;
var pass1= document.myform.pass1.value;
var pass2=document.myform.pass2.value;
if (pass1==pass2)
{
if (pass1.length!=0)
{
document.write("<H2>恭喜您，注册成功！欢迎
"+userName+"光临！ </H2>");
return true;
}
else
{
alert("密码不能为空！ \n请输入密码 ");
return false;
}
}
else
{
alert("确认码必须和输入的密码相同！ ");
return false;
}
}
<BODY>
<FORM name="myform" onSubmit="return check( )" >
onSubmit事件调用的函数：输入数据检查如果输入格式正确，返回
true，提交表单信息；
如果格式错误，返回 false，
取消提交，提醒用户重填
ACCP V4.016
复选框对象
当用户需要在选项列表中选择多项时，可以使用复选框对象
要创建复选框对象，请使用 <INPUT> 标签请选择您的爱好
<INPUT type=“checkbox” value=“电影,> 电影
<INPUT type=“checkbox” value=“电影,> 电影
ACCP V4.017
复选框 - 事件处理程序复选框
·
事件 onBlur 复选框失去焦点
onFocus 复选框获得焦点
onClick 复选框被选定或取消选定属性 checked 复选框是否被选中，选中为 true，未选中为 false。
您可以使用此属性查看复选框的状态或设置复选框是否被选中
value 设置或获取复选框的值
ACCP V4.018
复选框 - 事件处理程序
checkbox1 checkbox2 checkbox3
设置复选框的值
checkbox4
myform
ACCP V4.019
复选框 - 事件处理程序
<HEAD>
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
if (document.myform.checkbox1.checked==true) //如果被选中
s=s+document.myform.checkbox1.value+“\n”;//累计选中的商品
if (document.myform.checkbox2.checked==true)
s=s+document.myform.checkbox2.value+"\n";
if (document.myform.checkbox3.checked==true)
s=s+document.myform.checkbox3.value+"\n";
if (document.myform.checkbox4.checked==true)
s=s+document.myform.checkbox4.value+"\n";
// if(confirm("您定购了以下物品，确定吗？,\n"+s)==true)
document.write("您定购了以下物品,<PRE>"+s+"</PRE>");
}
</SCRIPT>
单击”成交“按钮调用的函数：
检查每个复选框的选中情况，
累计用户选中的商品
<PRE>是为了原样显示字符串中的换行” \n”格式
<INPUT type="button" value=" 成 交 >> " onClick="buy( )“>
ACCP V4.020
复选框 - 事件处理程序
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
for (var i=0;i< document.myform.mybox.length;i++)
{
//判断第 i个复选框是否被选中
if (document.myform.mybox[i].checked==true)
s=s+document.myform.mybox[i].value+"\n";
}
if(confirm("您准备购买以下物品，确定吗？,\n"+s)==true)
document.write("您购买了以下物品,<PRE>"+s+"</PRE>");
}
</SCRIPT>
//… 其他代码略
<INPUT name="mybox" type="checkbox" id="mybox" value="国服魔兽金币 ">
//… 其他代码略
2.使用数组和 for循环大大简化代码
1.修改每个复选框的名称都为 mybox，使这 4个复选框构成一个数组 mybox
ACCP V4.021
单选按钮对象
当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象
要创建单选按钮对象，请使用 <INPUT> 标签
<INPUT type=“radio” value=“M”>男
<INPUT type=“radio” value=“F”>女
ACCP V4.022
单选按钮 - 事件和属性单选按钮
·
事件 onBlur 单选按钮失去焦点
onFocus 单选按钮获得焦点
onClick 单选按钮 被选定或取消选定属性 checked 单选按钮是否被选中，选中为 true，未选中为
false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中
value 设置或获取单选按钮的值
ACCP V4.023
单选按钮 -事件处理程序为了保证单选，两个单选按钮的名称都为 myradio,组成了 myradio数组
ACCP V4.024
单选按钮－事件处理程序
<SCRIPT language="JavaScript">
function buy( )
{
var s="";
for (var i=0;i< document.myform.mybox.length;i++)
{
//判断第 i个复选框是否被选中
if (document.myform.mybox[i].checked==true)
s=s+document.myform.mybox[i].value+"\n";
}
//判断买家选项是否选中
if (document.myform.myradio[0].checked==true)
{
if(confirm("您准备 买进 以下物品，确定吗？,\n"+s)==true)
document.write("您买进了以下物品,<PRE>"+s+"</PRE>");
}
else
{
if (confirm("您准备 卖出 下物品，确定吗？,\n"+s)==true)
document.write("您卖出了以下物品,<PRE>"+s+"</PRE>");
}
}
根据用户是买家还是卖家，
弹出不同的确认信息框判断是否选中第一个单选按钮 (买家 )
ACCP V4.025
下拉列表框
<SELECT name="myselect" >
<OPTION>--请选择开户帐号的城市 --</OPTION>
<OPTION value="北京市 ">北京市 </OPTION>
<OPTION value="上海市 ">上海市 </OPTION>
<OPTION value="重庆市 ">重庆市 </OPTION>
<OPTION value="天津市 ">天津市 </OPTION>
<OPTION value="四川省 ">四川省 </OPTION>
<OPTION value="山东省 ">山东省 </OPTION>
<OPTION value="湖北省 ">湖北省 </OPTION>
</SELECT>
ACCP V4.026
下拉列表框 -事件和属性下拉列表框事件
onBlur 下拉列表框失去焦点
onChange 当选项发生改变时产生
onFocus 下拉列表框获得焦点属性
value 下拉列表框中，被选选项的值
options 所有的选项组成一个数组,options
表示整个选项数组，第一个选项即为 options[0]，第二个即为 options[1]，
其他以此类推
selectedIndex 返回被选择的选项的索引号，如果选中第一个返回 0，第二个返回 1，
其他类推
options
选项数组
options[0]
options[1]
selectedIndex属性：
表示被选中的索引号,3
value属性：被选中选项的值
ACCP V4.027
下拉列表框 -事件处理程序
ACCP V4.028
下拉列表框 - 事件处理程序
userName
myselect
mycitymyform
ACCP V4.029
下拉列表框 - 事件处理程序<SCRIPT language="JavaScript" >function myfun1( )
{
var d=document.myform.myselect.selectedIndex;
if (d==1 || d==2 || d==3 || d==4) // 北京、上海、重庆、天津
document.myform.city.value=
document.myform.myselect.options[d],text ;
}
function myfun2( )
{
var userName=document.myform.userName.value;
var province=document.myform.myselect.value ;
var city=document.myform.city.value ;
document.write("<body bgColor=#FFFAEB>");
document.write("<H2>您的注册信息如下,</H2>");
document.write("<HR>");
document.write("<P>姓名,"+userName);
document.write("<P>帐号开户省份,"+province);
document.write("<P>帐号开户城市,"+city);
}
</SCRIPT>
<SELECT name="myselect" onChange="myfun1( )">
…….
<IMG src="reg.bmp" onClick="myfun2( )">
下拉列表框 onChange事件调用的函数：判断选择的省份是否是直辖市单击”快速注册“图片时调用的函数
myfun2( )，显示注册信息
ACCP V4.030
表单验证 2-1
JavaScript 最常见的用法之一就是验证表单
对于检查用户输入是否存在错误和是否疏漏了必选项,JavaScript 是一种十分便捷的方法
ACCP V4.031
表单验证 2-2
<SCRIPT LANGUAGE="JavaScript">
function validate( )
{
var f=document.reg_form;
if(f.uname.value=="")
{
alert("请输入姓名 ");
f.uname.focus();
return false;
}
if (f.gender[0].checked==false && f.gender[1].checked==false)
{
alert("请指定性别 ");
f.gender[0].focus();
return false;
}
if ((f.password.value.length < 6) || (f.password.value == ""))
{
alert("请输入至少 6 个字符的密码！ ");
f.password.focus();
return false;
}
检查姓名检查性别检查密码
ACCP V4.032
表单验证 2-2
q=f.email.value.indexOf("@");
if (q==-1)
{
alert("请输入有效的电子邮件地址 ");
f.email.focus();
return false;
}
if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value))
{
alert("请输入有效的年龄！ ");
f.age.focus();
return false;
}
}
</SCRIPT>
<FORM name="reg_form" onSubmit="return validate()"
action="submit.htm">
检查邮件地址检查年龄
ACCP V4.033
总结
OnBlur,onChange 和 OnFocus 是一些与表单对象 相关的事件处理程序
在浏览器窗口中，如果文本框获得焦点，则会调用
onFocus 事件处理程序
当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序
当修改文本框内容或改写下拉列表框的选项时,则会调用
onChange 事件处理程序
JavaScript的主要功能之一是用于表单验证
