Java Web基础：第十三讲 客户端验证

 

    本文内容摘自：《Java Web 开发教程——入门与提高篇（JSP+Servlet ）》第51-53 页。

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"

          onsubmit="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== 另一个字符串，判断与另一个字符串是否相同。

 

 

上一讲：第十二讲 form元素的使用

下一讲：第十四讲 客户端验证的常用方法

李绪成 优快云 Blog ： http://blog.youkuaiyun.com/javaeeteacher

邀请您为好友： http://student.youkuaiyun.com/invite.php?u=124362&c=7be8ba2b6f3b6cc5