本文转载自李绪成老师的笔记,感谢李老师!
Web
应用中必须在客户端对输入信息进行验证,如果发现错误可以及时对用户进行反馈,也不用等到服务器发现之后再反馈,一方面是减少了用户的等待时间,另一方面减少不必要的交互过程。本节内容介绍如何使用JavaScript
完成客户端的验证。
JavaScript语言
在Web
应用中需要在客户端执行的功能可以使用JavaScript
语言编写,在使用的时候需要把JavaScript
代码放在下面的两个标识之间:
<script language="JavaScript">
相关JavaScript
代码
</script>
JavaScript
代码与Java
代码比较类似,但是更灵活一些,本书只介绍与客户端验证相关的JavaScript
代码,如果想更深入学习,可以参考专门的书籍。
通常会把对不同内容的验证写成不同的方法,方法的格式如下:
function
方法名(
参数)
{
//
方法体
}
不需要写方法的返回值类型,但是方法可以有返回值,并且可以是各种类型的返回值。方法的参数类型也可以不写。把方法放在JavaScript
的开始标识和结束标识之间即可。
要对用户输入的信息进行验证,需要先获取输入信息。每个表单元素都属于一个form
表单,要获取信息需要先获取到form
然后访问表单元素的值。
有两种方式可以获取form
表单,第一种方式可以通过document
对象获得form
:
form = document.form1
其中form1
是表单元素的名字。
另一种方式可以在调用验证方法的时候把form
作为参数,本章实例中使用的就是这种方式:
isValidate(form1)
其中form1
就是表单的名字。
得到form
之后,获取表单元素的值的代码如下:
form1.userid.value
其中,userid
是表单元素,value
是该表单元素的值。
验证通常在表单提交之前进行,那么如何在提交信息之前进行验证呢?可以通过按钮的onClick
事件,也可以通过form
表单的onSubmit
事件。
本章实例是通过form
表单的onSubmit
事件来完成的:
<form name="form1" action="register_confirm.jsp" method="post"
οnsubmit="return isValidate(form1)">
如果要通过按钮的onClick
事件完成,可以使用下面的代码:
<input type="button" value="
提交" onClick="JavaScript:isValidate()">
如果使用这个方法,在验证通过之后,需要编写提交表单的代码:
document.form1.submit();
在验证失败之后通常需要提示用户错误信息,可以通过下面的代码完成:
alert("
地址长度大于50
位!");
使用alert
提示错误信息,参数是要显示的错误信息。上面就是当用户输入的地址信息的长度大于50
的时候提示用户的信息。
如果验证失败通常会把光标放在相应的输入框中,可以使用下面的代码:
form.address.focus();
如果地址的长度不合适,就会把光标放在地址输入框中。
在验证过程中,有些方法经常使用,主要是与字符串处理相关的方法。假设str
是一个字符串,下面列出常用的对str
的处理方法:
str.length
,表示字符串的长度;
str.charAt(i)
,获取字符串中第i
个字符,i
从0
开始;
str.indexOf(c)
,查找某个字符的位置,返回值是第一次出现的位置,从0
开始,如果没有找到,返回-1
;
str.substring(index1,index2)
,获取子串,第一个参数表示开始位置,第二个参数表示结束位置,子串包括第一个参数,不包括第二个参数。如果只有一个参数,则获取从该参数开始到字符串结束的子串。此时方法就变成:str.substring(index);
。
str==
另一个字符串,判断与另一个字符串是否相同。