表单的验证有两种:
客户端验证:
--减少服务器负担。
--缩短用户等待时间。
--兼容性难。(不同浏览器对脚本语言的兼容性都是不同的)
服务器端验证:
--统一确认。
--兼容性强。
--服务器负载重。
客户端验证不写也是允许的,但服务器端验证必须有。用户可以(通过查看源代码直接输入地址)绕过客户端验证,如果服务器端的屏障没做好,插入到数据库的数据就是错误的,很麻烦。晚上的系统一般都有双重验证。
使用使用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
成功页面:
失败页面: