用户名、密码、复选框，全选各种验证

1、验证：

客户端验证：

减少服务器负载
缩短用户等待时间
兼容性难

服务器端验证：

统一确认
兼容性强
服务器负载重

2、使用Javascript进行表单检验的常用方法：

1. var username = document.getElementByIdx_x("username");
2. var username = document.getElementsByName("username")[0];
3. var nodes = document.getElementsByTagName_r("input");

2.1、基本的表单验证例子：

HTML代码：

1. <</SPAN>form onsubmit="return validate()" action="loginServlet">
2. username:<</SPAN>input type="text" id="username" name="username"/><</SPAN>br />
3. password:<</SPAN>input type="password" id="username" name="password"><</SPAN>br />
4. <</SPAN>input type="submit" value="submit" />
5. </</SPAN>form>

username: password:

JS验证代码：

[javascript]   view plain copy print ?

1. function validate(){
2. //使用getElementById方法获取元素
3. var username = document.getElementByIdx_x("username");
4. var password = document.getElementByIdx_x("password");
5. //使用getElementsByName获取一组元素
6. //var username = document.getElementsByName("username")[0];
7. //var username = document.getElementsByName("password")[0];
8. //获取元素的值 并判断长度
9. if(username.value.length == 0){
10. alert("用户名不能为空");
11. return false;
12. }
13. if(password.value.length <6){
14. alert("密码不能少于6位");
15. return false;
16. }
17. return true;
18. }
19. //根据标签获取元素组
20. var nodes = document.getElementsByTagName_r("input");
21. for(var i=0; i
22. //获取标签类型
23. alert(nodes[i].type);
24. }

2.2、单选按钮的验证例子：

HTML代码：

1. 男<</SPAN>input type="radio" name="gender" value="男">
2. 女<</SPAN>input type="radio" name="gender" value="女">

JS验证代码：

1. //单选按钮的验证
2. var gender = document.getElementsByName("gender");
3. if(!gender[0].checked && !gender[1].checked){
4. alert("请选择性别！");
5. }

2.3、复选框全选的例子：

HTML代码：

1. <</SPAN>input type="checkbox" name="selectAll" onclick="selectAll()">Select all<</SPAN>br />
2. <</SPAN>input type="checkbox" name="number" value="1">1<</SPAN>br />
3. <</SPAN>input type="checkbox" name="number" value="2">2<</SPAN>br />
4. <</SPAN>input type="checkbox" name="number" value="3">3<</SPAN>br />
5. <</SPAN>input type="checkbox" name="number" value="4">4<</SPAN>br />
6. <</SPAN>input type="checkbox" name="number" value="5">5<</SPAN>br />
7. <</SPAN>input type="checkbox" name="number" value="6">6<</SPAN>br />
8. <</SPAN>input type="checkbox" name="number" value="7">7<</SPAN>br />
9. <</SPAN>input type="checkbox" name="number" value="8">8<</SPAN>br />
10. <</SPAN>input type="checkbox" name="number" value="9">9<</SPAN>br />
11. <</SPAN>input type="checkbox" name="number" value="10">10<</SPAN>br /><</SPAN>inputtype="checkbox" name="number">10<</SPAN>br />

JS代码：

2. function selectAll(){
3. var selectAll = document.getElementsByName("selectAll")[0];
4. if(selectAll.checked){
5. var numbers = document.getElementsByName("number");
6. for(var i=0; i
7. numbers[i].checked = true;
8. }
9. } else {
10. for(var i=0; i
11. numbers[i].checked = false;
12. }
13. }
14. }

判断复选框是否有选择：

2. function validateCheckbox(){
3. var n = 0;
4. for(var i=0; i
5. if(numbers[i].checked){
6. n++;
7. }
8. }
9. if(n < 1){
10. alert("至少要选择一项");
11. }
12. }

3、在服务器端使用Servlet进行验证的例子：

1. @Override
2. protected void doGet(HttpServletRequest req, HttpServletResponse resp)
3. throws ServletException, IOException {
4. String username = req.getParameter("username");
5. String password = req.getParameter("password");
6. //获取单选按钮的值
7. String gender = req.getParameter("gender");
8. //获取复选框的值
9. String[] numbers = req.getParameterValues("number");
10. List list = new ArrayList();
11. //验证判断
12. if("".equals(username)){
13. list.add("用户名不能为空");
14. }
15. if(password == null){
16. list.add("用户密码不能为空");
17. }
18. if(password != null && password.length()<</SPAN>6){
19. list.add("用户密码不能少于6位");
20. }
21. //页面跳转
22. if(list.isEmpty()){
23. req.getRequestDispatcher("index.jsp").forward(req, resp);
24. } else {
25. req.setAttribute("error", list);
26. req.getRequestDispatcher("error.jsp").forward(req, resp);
27. }
28. }

4、Servlet中的编码设置：

1. req.setCharacterEncoding("utf-8");
2. resp.setCharacterEncoding("utf-8");
3. ...
4. //编码设置
5. gender = new String(gender.getBytes("iso-8859-1"),"utf-8");