对上面这个用户基本信息页面进行客户端与服务器端的验证,下面是验证条件
用户名与密码不能为空,且长度在4与10之间。
性别必须选择一个,兴趣也必须选择一个,不能超过三个。
地址不作要求,说明必填。
userlogin.jsp
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <head>
- <script type="text/javascript">
- function validate(){
- var username = document.getElementsByName("username")[0];
- var password = document.getElementsByName("password")[0];
- var gender = document.getElementsByName("gender");
- var interest = document.getElementsByName("interest");
- var comment = document.getElementsByName("comment")[0];
- if(username.value.length < 1){
- alert("用户名不能为空")
- return false;
- }
- if(password.value.length < 1){
- alert("用户密码不能为空")
- return false;
- }
- if(username.value.length <4 || username.value.length >10){
- alert("用户名长度必须大于等于4小于等于10")
- return false;
- }
- if(password.value.length <4 || password.value.length >10){
- alert("用户密码长度必须大于等于4小于等于10")
- return false;
- }
- if(!gender[0].checked && !gender[1].checked){
- alert("必须选择一个性别");
- return false;
- }
- var n = 0;
- for(var i =0;i<interest.length;i++){
- if(interest[i].checked){
- n++;
- }
- }
- if(n<1){
- alert("兴趣至少应选择一项");
- return false;
- }
- if(n == 4){
- alert("兴趣不能超过三项");
- return false;
- }
- if(comment.value.length <1){
- alert("说明必须填写");
- return false;
- }
- return true;
- }
- </script>
- </head>
- <html>
- <body>
- <form onsubmit="return validate();" action="UserValidateServlet">
- 用户名:<input type="text" name="username"/><br>
- 密 码:<input type="password" name="password"/><br>
- 性别: 男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/><br>
- 兴趣:足球<input type="checkbox" name="interest" value="足球"/>
- 篮球<input type="checkbox" name="interest" value="篮球"/>
- 排球<input type="checkbox" name="interest" value="排球"/>
- 羽毛球<input type="checkbox" name="interest" value="羽毛球"/> <br>
- 地址:
- <select name="address">
- <option value="上海">上海</option>
- <option value="北京">北京</option>
- <option value="天津">天津</option>
- </select>
- <br>
- 说明:
- <textarea name="comment" rows="15" cols="20"></textarea><br>
- <input type="submit" value="点击确认"> <input type="reset" value="重置">
- </form>
- </body>
- </html>
服务器端验证:新建一个Servlet
UserValidateServlet.java
- package com.test.servlet;
- import java.io.IOException;
- import java.util.ArrayList;
- import java.util.List;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- public class UserValidateServlet extends HttpServlet {
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- String username = request.getParameter("username");
- String password = request.getParameter("password");
- String gender = request.getParameter("gender");
- String[] interest = request.getParameterValues("interest");
- String address = request.getParameter("address");
- String comment = request.getParameter("comment");
- List<String> list = new ArrayList<String>();
- if(username == null || password == null){
- list.add("用户名或密码不能为空");
- }
- if((username.length() <4 || username.length() >10) || (password.length() <4 || password.length() >10)){
- list.add("用户名或密码的长度不能小于4或大于10");
- }
- if(gender == null){
- list.add("性别必须选择");
- }
- if(comment == null){
- list.add("评论不能为空");
- }
- if(interest == null || interest.length > 3){
- list.add("兴趣不能为空或选择不能超过3个");
- }
- if(list.isEmpty()){
- request.setAttribute("username", username);
- request.setAttribute("password", password);
- request.setAttribute("gender", gender);
- request.setAttribute("interest", interest);
- request.setAttribute("address", address);
- request.setAttribute("comment", comment);
- request.getRequestDispatcher("loginSuccess.jsp").forward(request, response);
- }else{
- request.setAttribute("list", list);
- request.getRequestDispatcher("loginFail.jsp").forward(request, response);
- }
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- super.doPost(request, response);
- }
- }