首页 理论教育JavaWeb应用开发:实现表单JS验证

JavaWeb应用开发:实现表单JS验证

【摘要】:在实际Web 项目的开发过程中,为了减轻服务器的负担,很多HTML 表单都需要用JavaScript 编写的代码进行验证。由于这里的验证比较集中,所以就另外创建一个Javascript 文件用于存放diaocha.html 的表单验证代码。图3.13建立js 文件然后在js 文件夹下建立diaocha.js 文件。右键单击js 文件夹,在弹出的快捷菜单中选择“New”“File”。将弹出如图3.13 所示的窗口,在窗口中填写文件名diaocha.js。diaocha.js 文件内容如下:JavaScript 验证一般是先定位元素,然后获取元素的值,最后进行判断。图3.14JS 表单验证

在实际Web 项目的开发过程中,为了减轻服务器的负担,很多HTML 表单都需要用JavaScript 编写的代码进行验证。

可以将JavaScript 代码嵌入HTML 文件中,也可以放在独立的JavaScript 文件中。由于这里的验证比较集中,所以就另外创建一个Javascript 文件用于存放diaocha.html 的表单验证代码。

首先在WebContent 下建立一个js 文件夹用于存放js 文件。右键单击WebContent文件夹,在弹出的快捷菜单中选择“New”➔“Folder”。在弹出的窗口中填写文件夹名。

图3.13 建立js 文件

然后在js 文件夹下建立diaocha.js 文件。右键单击js 文件夹,在弹出的快捷菜单中选择“New”➔“File”。将弹出如图3.13 所示的窗口,在窗口中填写文件名diaocha.js。或者也可以通过“New”➔“Other”➔“Eclipse”➔“Web”➔“JavaScript Source File”方式建立JavaScript 文件,这种方式可以不写文件后缀。

diaocha.js 文件内容如下:

JavaScript 验证一般是先定位元素(使用较多的是通过“document.表单名.元素名”或者“document.getElementById(id)”等方法),然后获取元素的值,最后进行判断。只有当所有验证通过之后才将数据提交到服务器进行处理。

JavaScript 文件建立好之后,就将其引入HTML 中。在diaocha.html 中的<head>元素下加入:

(www.chuimin.cn)

有时候引入的JS 文件在运行时会出现中文乱码的情况,解决办法是在<script>标签中添加charset 属性,例如:

还需要注意的是,<script>元素最好不要空结束,那样有时会出现问题,例如:

接下来在<form>标签添加事件调用(注意return 关键字):

运行效果如图3.14 所示。

图3.14 JS 表单验证