5。1 为什么需要表单验证
无论是动态网站，还是其他B/S结构的系统，都离不开表单。表单作为客房端向服务器提交数据的主要载体扮演着十分重要的角色，这就引出了一些问题，如果提交的数据不合法，那么怎么办？其实，使用javaScript是一种十分便捷的解决方法，它不但能检查用户输入的无效或错误数据，还能检查用户遗漏的必选项，从而减轻服务端的压力，避免服务器端的信息无法更新或出现新错误。
1。避免信息无法更新或出现新错误
2。减轻服务器压力
5。2 表单验证的内容
1。检查表单元素是否为空
2。验证是否为数字
3。验证用户邮件地址格式是否有效
4。检察用户输入的数据是否在某个范围
5。验证用户输入人信息长度是否足够
6。检查出生日期是否有效。
5。3 表单验证的思路
5。3。1 String对象简介
字符串是引号括起来的任何文本，引号可以是双引号也可以是单引号，如果一个字符串中有两层双引号，则通常外层用双引号，内层用单引号以示两层引号的不同，如"compute('+')"。
String 对象通常用于操作和处理字符串，可以在程序中获得字符串长度，如何对一个字符串按指定的样式显示，提取子字符串，求一个字符串中指定位置的字符以及将字符串转换为大写或小写字符。字符串对象引用属性和方法的一般语法如下。
语法：
字符串对象.属性 或 字符串对象.方法名()
创建字符串：
var newstr="compute"; var newstr=new String("compute");
1。字符串对象的属性 只有一个属性length。表示字符个数
2。方法
indexOf("子字符串"，起始位置) 查找子字符串的位置，这个位置是要查找的文本出在的第一个位置
charAt(index) 获取位于指定索引位置的字符
substring(index1[,index2]) 返回包括index1和不包括索引index2之间的字符串
toLowerCase() 转换为小写
toUpperCase() 转换为大写
其中，最常用的方法是indexOf()，其用法如下：
字符串.indexOf("查找的字符或字符串",查找的起始位置)，如果找到了，则返回找到的位置，否则返回-1。
5。3。2 电了邮件格式的验证
获取表单元素(E-mail文本框)的值(String 类型)，然后进行判断，由于我们获得的表单元素的值是字符串对象，所以可以通过前面介绍的字符串属性(length)来判断获得的表单元素的值是否为空，通过方法(indexOf())，来判断表单元素中是否包含"@"和"."符号。该事件是在提交表单时产生的，onSubmit事件调用脚本函数的执行。
示例1：
<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必须包含@符号！");
return false;
}
if (strEmail.indexOf(".",0)==-1)
{
alert("电子邮件格式不正确/n必须包含.符号！");
return false;
}
return true;
}
</SCRIPT>
</HEAD>
<FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
<P align="center"> <IMG src="images/reg_back1.jpg" width="979" height="195"></P>
<TABLE border="0" align="center">
<TR>
<TD>您的电子邮件</TD>
<TD colspan="2"><INPUT name="txtEmail" type="text" id="txtEmail">*必填</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 align="center"><IMG src="images/bottom.jpg" width="969" height="107"></P>
<P> </P>
</FORM>
</HTML>
5。4 文本框控件
5。4。1 文本框对象简介
事件
onBlur 失去焦点事件，当光标离开某个文本框时触发
onFocus 光标进入某个文本框
onChange 文本框的内容被修改，即发生了改变
方法
focus() 获得焦点
select() 选中文本内容，突出显示输入区域
属性
value 设置或获得一个文本框值属性的值
5。4。2 电了邮件格式验证的改进
下面是一个更好的示例，有更多的功能。
示例2：
<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>
本章总结
表单验证能减轻服务器的压力
JavaScript 能增强表单的交互性，验证用户输入的数据
String 对象用于操作和处理字符串文本非常有用
OnBlur,onChang,onFocus是与表单对象关联的部分事件处理程序。
