表单的验证有两种：

客户端验证：

--减少服务器负担。

--缩短用户等待时间。

--兼容性难。（不同浏览器对脚本语言的兼容性都是不同的）

服务器端验证：

--统一确认。

--兼容性强。

--服务器负载重。

 

客户端验证不写也是允许的，但服务器端验证必须有。用户可以（通过查看源代码直接输入地址）绕过客户端验证，如果服务器端的屏障没做好，插入到数据库的数据就是错误的，很麻烦。晚上的系统一般都有双重验证。

使用使用JavaScript实现客户端验证：

验证条件：用户名、密码、重复密码不为空，密码和重复密码相同，长度6-10.

 1 //myLogin.jsp
 2 <html>
 3     <head>
 4         <script type ="text/javascript">
 5              function validate()
 6              {
 7                     var usern = document.getElemertBYid("username1");
 8                     var pasw = document.getElemertBYid("password1");
 9                     var repasw = document.getElemertBYid("repassword1");  
10                     if(usern.value.length == 0)
11                     {
12                           alert("username can't be blank!")
13                           return false;  
14                     }
15 
16                     if(pasw.value.length < 6 || password.value.length > 10)
17                     {
18                           alert("length of password is invalid!")
19                           return false;  
20                     }
21                     if(repasw.value.length < 6 || repasw.value.length > 10)
22                     {
23                           alert("length of repassword is invalid!")
24                           return false;  
25                     }
26                      if(pasw.value.length != repasw.value.length )
27                     {
28                           alert("password not the same!")
29                           return false;  
30                     }
31 
32              }
33         </script>
34     </head>
35     <body>
36         <form onsubmit="return validate()" action="someServlet">
37 
38          username:<input type="text" name="username" id="username1"><br>
39          password:<input tytype="text" name="password" id="password1"><br>
40          repassword:<input tytype="text" name="repassword" id="repassword1"><br>
41          <input type="submit" value="submit">
42 
43         </form>
44     </body>
45 </html>

script通常写在<head></head>里。

<script></script>表示里面使用js脚本。

使用js最常用的就是定义函数。没有那么多东西，就是function yourf（）{} ，其所有的变量也都是由var定义的。 对于javascript也常用alert。

要获得下面表单的东西，方式有很多 ：

1、给控件增加id属性。id属性不是被服务器端使用的，是被客户端javascript脚本使用的。

document是javascript内置对象，代表当前文档本身。 javascript不强制要有分号结束。

onsubmit="return validate();提交的时候调用该函数。分号可无。返回真才提交给服务器。

在js里点什么并没有全部的智能提示，没出现也可以用。

这时，用户可以这么做：

查看浏览器的该源代码，由<form onsubmit="return validate()" action="someServlet">发现表单提交到someServlet，并且有username、password、repassword3个变量。那他可以直接在浏览器url输入

http://……/someServlet?username=&password=123&repassword=456

这样用户就可以绕过客户端验证直接到达服务器端了。所以服务器端验证必须有。

另外，javascript里面数组长度确定了还可以改变大小，和集合一样：

 1   //myLogin.jsp
 2   <html>
 3       <head>
 4           <script type ="text/javascript">
 5                function validate()
 6                {
 7                       //var usern = document.getElemertBYid("username1");
 8                       //var pasw = document.getElemertBYid("password1");
 9                       //var repasw = document.getElemertBYid("repassword1");
10                       
11                       var usern = document.getElementsByName("username1")[0];
12                       var pasw = document.getElementsByName("username1")[0];
13                       var resw = document.getElementsByName("username1")[0];

用javascript实现全选：

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4     function selectAll()
 5     {
 6          var allMails = document.getElementsByName("allMails");
 7          var mails = document.getElementsByName("email");
 8          if(allMails.checked)
 9          {
10              
11              for(var i = 0; i < mails.length;i++)
12              {
13                     mails[i].checked = true;
14              } 
15          }  
16         else
17         {
18               for(var i = 0; i < mails.length;i++)
19               {
20                       mails[i].checked = false;
21               }
22         } 
23     }
24 </script>
25 </head>
26 <body>
27 全选<input type="checkbox" onclick="selectAll" name="allMails"><br><br><br>
28 <input type="checkbox" name="email"><br>
29 <input type="checkbox" name="email"><br>
30 <input type="checkbox" name="email"><br>
31 <input type="checkbox" name="email"><br>
32 <input type="checkbox" name="email"><br>
33 <input type="checkbox" name="email"><br>
34 <input type="checkbox" name="email"><br>
35 <input type="checkbox" name="email"><br>
36 
37 </body>
38 </html>

 另外，除了document.getElementsByName还可以document.getElementsByTagName。通过标签（像input这些标签）的名字获得元素，打印出来看看。如：

1 // in the function selectAll: 
2 var nodes=document.getElementsByTagName("input");
3 for(var i = 0 ; i <nodes.length;i++)
4 {
5    alert(nodes[i]);
6    alert(nodes[i].type);
7 }

 

使用Servlet实现服务器端验证：

验证条件也是：用户名、密码、重复密码不为空，密码和重复密码相同，长度6-10.

也是那个表单：给表单增加 action="someServlet" action="ValidateServlet"

 1   <body>
 2          <form onsubmit="return validate()" action="someServlet" action="ValidateServlet">
 3  
 4           username:<input type="text" name="username" id="username1"><br>
 5           password:<input tytype="text" name="password" id="password1"><br> 
 6           repassword:<input tytype="text" name="repassword" id="repassword1"><br>
 7           <input type="submit" value="submit">
 8  
 9          </form>
10      </body>

新建 ValidateServlet.java

 

 成功页面：

失败页面：