您的位置：首页 > 其它

对复杂表单进行客户端服务端验证

2014-08-26 11:14 337 查看

对上面这个用户基本信息页面进行客户端与服务器端的验证，下面是验证条件

用户名与密码不能为空，且长度在4与10之间。

性别必须选择一个，兴趣也必须选择一个，不能超过三个。

地址不作要求，说明必填。

userlogin.jsp

Html代码

<%@ 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

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);

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航