一、为什么需要表单验证
二、电子邮件格式的验证
三、文本框对象的事件、方法、属性
四、制作图片代替按钮的提交效果
五、制作回车切换输入效果
六 、制作即时错误信息提示效果
七、利用下拉列表框制作省市级联功能
一、为什么需要表单验证：
1、避免信息无法更新或出现新错误
2、减轻服务器端的压力
二、电子邮件格式的验证：
Code
<HTML>
<HEAD>
<TITLE>使用文本框控件</TITLE>
<SCRIPT language = "JavaScript">
function checkEmail( )
{
var strEmail=document.myform.txtEmail.value;
if (strEmail.length==0)
{
alert("电子邮件不能为空!");
return false;
}
if (strEmail.indexOf("@",0)==-1)
{
alert("电子邮件格式不正确\n必须包含@符号！");
document.myform.txtEmail.focus( );
document.myform.txtEmail.select( );
return false;
}
if (strEmail.indexOf(".",0)==-1)
{
alert("电子邮件格式不正确\n必须包含.符号！");
document.myform.txtEmail.focus( );
document.myform.txtEmail.select( );
return false;
}
return true;
}
function clearText( )
{
if (document.myform.txtEmail.value=="请输入真实的电子邮箱，我们将发送激活密码")
{
document.myform.txtEmail.value="" ;
document.myform.txtEmail.style.color="red";
}
}
</SCRIPT>
<STYLE type="text/css">
<!--
.textBorder {
border: 1px solid;
font-size:15px;
}
-->
</STYLE>
</HEAD>
<FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
<P><IMG src="images/reg_back1.jpg" width="979" height="195"></P>
<TABLE width="559" border="0" align="center">
<TR>
<TD>登录名：</TD>
<TD colspan="2"><INPUT name="txtUserName" type="text" class="textBorder" id="txtUserName" size="40"></TD>
</TR>
<TR>
<TD>您的电子邮件: </TD>
<TD colspan="2"><INPUT name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱，我们将发送激活密码" size="40" onFocus="clearText( )" style="color: #666666;">
*必填</TD>
</TR>
<TR>
<TD colspan="3" align="center"><P>
</P>
<P>
<INPUT name="clearButton" type="reset" id="clearButton" value=" 清 空 ">
<INPUT name="registerButton" type="submit" id="registerButton" value=" 注 册 " >
</P></TD>
</TR>
</TABLE>
<P><IMG src="images/bottom.jpg" width="969" height="107" ></P>
<P> </P>
</FORM>
</HTML>onSubmit：事件属于<form>表单元素，所以要写在<form>标签内。onSubmit="return checkEmail()"将根据返回的真/假值来决定是否提交表单数据。
三、文本框对象的事件、方法、属性
1、事件：onBlur失去焦点事件，当光标离开某个文本框时触发
onFocus光标进入某个文本框
onChang文本框的内容被修改，即发生了改变
2、方法：focus()获得焦点，即获得鼠标光标
select()选中文本内容，突出显示输入区域
3、属性：value设置或获得一个文本框值属性的值
四、制作图片代替按钮的提交效果
Code
<SCRIPT language="JavaScript" >
function checkForm( )
{
if ( document.myform.txtUserName.value.length==0)
{
alert("用户名不能为空！");
document.myform.txtUserName.focus( );
}
else
{
document.myform.submit( );
}
}
</SCRIPT>
<TR>
<TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD>
</TR>
五、制作回车切换输入效果
Code
<script language="javascript" type="text/javascript">
function changeFocus( )
{
/**//*判断按下回车键的控件类型：不能是提交、重置按钮等类型*/
if (event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='' )
event.keyCode=9;
}
document.onkeydown= changeFocus ; //dcument对象的onkeydown事件
</script>
"event.srcElement.type"表示捕获的事件元素的类型，对应HTML中的元素的type值。
六 、制作即时错误信息提示效果
1、通过使用alert语句弹出错误提示警告框来实现。（不经常使用）
2、通过改变层中的内容或显示、隐藏层来实现。
Code
<script language="javascript" type="text/javascript">
function checkLogin( )
{
var myDiv=document.getElementById("loginError");
myDiv.innerHTML=""; //设置层的开始和结束标签之间的HTML为空
var strName=document.userfrm.loginName.value;
if (strName.length == 0)
{
myDiv.innerHTML="<font color='red'>用户名不能为空</font>";
return;
}
}
</script>
<td width="445" align="left" bordercolor="#E7E3E7"> <input name="loginName" type="text" class="borderBox" id="loginName"
size="24" onblur="checkLogin( )">
<div id="loginError" style="display:inline"></div> </td>
注意：凡是所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。
如document.getElementById("info").innerHTML的值就是“文本内容”。
类似于document.userfrm.loginName.value
有哪些方法可以实现动态改变页面内容？
1、当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码”；
2、当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，
然后使用myDiv.style.display=“none/block”；
七、利用下拉列表框制作省市级联功能
1、下拉列表框的常用事件、属性和方法
事件 onChange 当选项发生改变时产生
属性 options 所有的选项组成一个数组，options表示整个选项数组，
第一个选项即为options[0]，第二个选项即为options[1]，其他类推
selectedIndex 返回被选择地选项的索引号，如果选中第一个则返回0，第二个则返回1，其他类推
length 返回下拉菜单中的选项个数
方法 add（new，old）将新的option对象new插入到option对象old前面，如果old为空，那么直接插入到末尾
2、数组的常用属性和方法
属性 length
方法 join(分隔符)
sort（） 排序
Code
<SCRIPT language="JavaScript" >
function changeCity( ){
var cityList = new Array( );
cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];
//获得省份选项的索引号，如四川省为1，比对应数组索引号多1
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;
for (var j in cityList[pIndex])
{
newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</SCRIPT>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<SELECT name="selProvince" id="selProvince" onChange="changeCity( )">
<OPTION>--请选择开户帐号的省份--</OPTION>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山东省">山东省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</SELECT>
..
<SELECT name="selCity">
<OPTION>--请选择开户帐号的城市--</OPTION>
</SELECT>
