一文读懂表单验证（表单验证的目的）

表单验证概述

无论是动态网站，还是其他B/S结构的系统，都离不开表单。表单作为客户端向服务器端提交数据的主要载体，表单验证是避免提交的数据不合法的重要途径。

表单验证的必要性

表单验证可以放在客户端和服务器端，客户端验证实际是直接在已下载到本地的页面中调用脚本来进行验证，它不但能检查用户输入的无效或者错误数据，还能检查用户遗漏的必选项；而服务器端的验证则是将页面提交到服务器处理，服务器上的另一个包含表单的页面先执行对表单的验证，然后再返回相应结果到客户端，它的缺点是每一次验证都要经过服务器，不但消耗时间长，而且会大大增加服务器的负担。在客户端进行验证，能把服务器端的任务分给多个客户端去完成，从而减轻服务器端的压力，让服务器专门做其他更重要的事情。

基于以上原因，需要使用JavaScript在客户端对表单数据进行验证。接下来，就来具体了解表单验证的相关内容。

表单验证的内容

以常见的注册表单为例，表单验证的内容主要包括如下几种类型：

· 检查表单元素是否为空（如登录名不能为空）。

· 验证是否为数字（如出生日期中的年月日必须为数字）。

· 验证用户输入的电子邮箱地址是否有效（如电子邮箱地址中必须有“@”和“.”字符）。

· 检查用户输入的数据是否在某个范围之内（如出生日期的月份必须在1~12之间，日期必须在1~31之间）。

· 验证用户输入的信息长度是否足够（如输入的密码必须大于等于6个字符）。

实际上，在设计表单时，还会因情况不同而遇到其他很多不同的问题，这就需要我们自己去定义一些规定和限制。

表单验证的实现思路

表单验证的实现思路具体分析如下：

1. 获取表单元素的值，这些值一般都是String类型，包含数字、下划线等。

2. 根据业务规则，使用JavaScript中的一些方法对获取的数据进行判断。

3. 表单Form有一个事件onsubmit，它是在提交表单之前调用的，因此可以在提交表单时触发onsubmit事件，然后对获取的数据进行验证。

表单验证有两种方式：

· 简单的业务验证用String对象的属性和方法即可。

· 复杂的验证用正则表达式。

本任务只讲解使用String对象进行验证，后续任务讲解使用正则表达式进行验证。