jsp中可以输入文字的下拉列表源码实例



jsp中可以输入文字的下拉列表源码实例。当我们在开发需要用户注册的页面,或者要用户填写资料的jsp页面时候,通常会涉及到如何编写可以输入文字的下拉列表的问题,以下为大家展示其中的jsp源码。

处理提交信息的jsp源码:

<%@ page contentType=”text/html; charset=gb2312″ language=”java” import=”java.sql.*” errorPage=”" %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>可以输入文字的下拉列表</title>
<link href=”CSS/style.css” rel=”stylesheet”>
</head>

<body>
<%request.setCharacterEncoding(“gb2312″);%>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ >
<tr>
<td>
<table width=”777″ height=”768″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFFFF”>
<tr>
<td valign=”top”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”tableBorder_LTR”>
<tr>
<td height=”30″ align=”center” bgcolor=”#eeeeee”>≡≡≡ 用户注册填写≡≡≡</td>
</tr>
</table>
<table width=”100%” height=”330″ border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableBorder_LBR”>
<tr>
<td width=”26%” valign=”top”><table width=”100%” border=”0″ cellspacing=”-2″ cellpadding=”-2″>
<tr>
<td width=”55%” height=”82″ align=”center” class=”word_grey”>&nbsp;<img src=”Images/reg.gif” width=”84″ height=”54″></td>
<td width=”45%” align=”left” class=”word_grey”><b>注册帮助</b></td>
</tr>
<tr>
<td height=”112″ colspan=”2″ valign=”top” class=”word_grey”><ul>
<li> 用户名:为用户进行订单查询的通行证号,可使用英文字母、数字或英文字母、数字、下划线的组合,长度控制在3-20个字符之内。</li>
<li>密码:请设定在6-20位之间,用户密码及确认密码必须一致。</li>
<li>证件号码:请输入正确的证件号码。</li>
<li>Email:请填写有效的Email地址,以便于与您联系。</li>
</ul></td>
</tr>
<tr align=”center”>
<td colspan=”2″ valign=”middle” class=”word_grey”></td>
</tr>
</table></td>
<td width=”5″ valign=”top” background=”Images/Cen_separate.gif”></td>
<td width=”73%” valign=”top”><table width=”100%” height=”56″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>&nbsp;</td>
</tr>
<tr>
<td align=”center”>
<form action=”register_deal.jsp” method=”post” name=”form1″>
<table width=”100%” border=”0″ cellspacing=”-2″ cellpadding=”-2″>
<tr>
<td width=”18%” height=”30″ align=”center”>用 户 名:</td>
<td width=”82%” align=”left” class=”word_grey”><input name=”UserName” type=”text” id=”UserName4″ value=”<%=request.getParameter(“UserName”)%>” maxlength=”20″></td>
</tr>
<tr>
<td height=”28″ align=”center”>密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
<td height=”28″ align=”left”><input name=”PWD1″ type=”password” id=”PWD14″ value=”<%=request.getParameter(“pwd1″)%>” size=”20″ maxlength=”20″></td>
</tr>
<tr>
<td height=”28″ align=”center”>证件类别:</td>
<td align=”left”><span class=”word_grey”>
<input name=”CardType” type=”text” id=”CardType” value=”<%=request.getParameter(“CardType”)%>” />
</span></td>
</tr>
<tr>
<td height=”28″ align=”center”>证件号码:</td>
<td align=”left” class=”word_grey”><input name=”cardNO” type=”text” id=”Tel” value=”<%=request.getParameter(“cardNO”)%>”></td>
</tr>
<tr>
<td height=”28″ align=”center”>联系电话:</td>
<td align=”left”><input name=”tel” type=”text” id=”Tel” value=”<%=request.getParameter(“tel”)%>”></td>
</tr>
<tr>
<td height=”28″ align=”center” style=”padding-left:10px”>Email:</td>
<td align=”left” class=”word_grey”><input name=”Email” type=”text” id=”PWD224″ value=”<%=request.getParameter(“Email”)%>” size=”50″></td>
</tr>
<tr>
<td height=”28″ align=”center”>邮政编码:</td>
<td align=”left” class=”word_grey”><input name=”postcode” type=”text” id=”postcode” value=”<%=request.getParameter(“postcode”)%>” size=”20″></td>
</tr>
<tr>
<td height=”28″ align=”center”>联系地址:</td>
<td align=”left” class=”word_grey”><input name=”address” type=”text” id=”address” value=”<%=request.getParameter(“address”)%>” size=”50″></td>
</tr>
<tr>
<td height=”34″ align=”center”>&nbsp;</td>
<td height=”34″ align=”left”><input name=”Submit2″ type=”button” class=”btn_grey” value=”返回” onclick=”window.location.href=’index.jsp’” /></td>
</tr>
</table>
</form>
</td>
</tr>
</table></td>
</tr>
</table>
<jsp:include page=”copyright.jsp”/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

提交信息的jsp源码文件实例:

<%@ page contentType=”text/html; charset=gb2312″ language=”java” import=”java.sql.*” %>
<html>
<head>
<title>可以输入文字的下拉列表</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<link href=”CSS/style.css” rel=”stylesheet”>
<script src=”JS/check.jsp”></script>
<script language=”javascript”>
function trigger(opt){
//opt表示现有可选项的数目
form1.CardType.options[opt]=new Option(form1.CardType.options[opt]?
form1.CardType.options[opt].innerText+String.fromCharCode(event.keyCode):
String.fromCharCode(event.keyCode))
form1.CardType.selectedIndex=opt; //设置下拉列表的选中项
}
function edit(opt){
//opt表示现有可选项的数目
if(form1.CardType.options[opt]){
if(event.keyCode==8){
var str=form1.CardType.options[opt].innerText;
var len=str.length;
form1.CardType.options[opt].innerText=str.substring(0,len-1);
if(form1.CardType.options[opt].innerText==”"){
form1.CardType.remove(opt);
form1.CardType.selectedIndex=1;
};
}
if(event.keyCode==32){
form1.CardType.options[opt].innerText+=” “;
}
}
}
</script>
</head>

<body>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ >
<tr>
<td>
<table width=”777″ height=”768″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFFFF”>
<tr>
<td valign=”top”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”tableBorder_LTR”>
<tr>
<td height=”30″ align=”center” bgcolor=”#eeeeee”>≡≡≡ 用户注册信息 ≡≡≡</td>
</tr>
</table>
<table width=”100%” height=”330″ border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableBorder_LBR”>
<tr>
<td width=”26%” valign=”top”><table width=”100%” border=”0″ cellspacing=”-2″ cellpadding=”-2″>
<tr>
<td width=”55%” height=”82″ align=”center” class=”word_grey”>&nbsp;<img src=”Images/reg.gif” width=”84″ height=”54″></td>
<td width=”45%” align=”left” class=”word_grey”><b>注册帮助</b></td>
</tr>
<tr>
<td height=”112″ colspan=”2″ valign=”top” class=”word_grey”><ul>
<li> 用户名:为用户进行订单查询的通行证号,可使用英文字母、数字或英文字母、数字、下划线的组合,长度控制在3-20个字符之内。</li>
<li>密码:请设定在6-20位之间,用户密码及确认密码必须一致。</li>
<li>证件号码:请输入正确的证件号码。</li>
<li>Email:请填写有效的Email地址,以便于与您联系。</li>
</ul></td>
</tr>
<tr align=”center”>
<td colspan=”2″ valign=”middle” class=”word_grey”></td>
</tr>
</table></td>
<td width=”5″ valign=”top” background=”Images/Cen_separate.gif”></td>
<td width=”73%” valign=”top”><table width=”100%” height=”56″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>&nbsp;</td>
</tr>
<tr>
<td align=”center”>
<form action=”register_deal.jsp” method=”post” name=”form1″>
<table width=”100%” border=”0″ cellspacing=”-2″ cellpadding=”-2″>
<tr>
<td width=”18%” height=”30″ align=”center”>用 户 名:</td>
<td width=”82%” class=”word_grey”><input name=”UserName” type=”text” id=”UserName4″ maxlength=”20″>
* [<a href="#">检测用户名</a>]</td>
</tr>
<tr>
<td height=”28″ align=”center”>密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
<td height=”28″><input name=”PWD1″ type=”password” id=”PWD14″ size=”20″ maxlength=”20″>
*</td>
</tr>
<tr>
<td height=”28″ align=”center”>确认密码:</td>
<td height=”28″><input name=”PWD2″ type=”password” id=”PWD25″ size=”20″ maxlength=”20″>
* </td>
</tr>
<tr>
<td height=”28″ align=”center”>证件类别:</td>
<td><select id=”CardType” class=”textarea” onkeypress=”trigger(3)” onkeyup=”edit(3)” name=”CardType”>
<option value=”身份证”>身份证</option>
<option value=”军官证”>军官证</option>
<option value=”学生证”>学生证</option>
</select>
(如果下拉列表中不存在,可以直接输入)</td>
</tr>
<tr>
<td height=”28″ align=”center”>证件号码:</td>
<td class=”word_grey”><input name=”cardNO” type=”text” id=”Tel”>
*</td>
</tr>
<tr>
<td height=”28″ align=”center”>联系电话:</td>
<td><input name=”tel” type=”text” id=”Tel”></td>
</tr>
<tr>
<td height=”28″ align=”center” style=”padding-left:10px”>Email:</td>
<td class=”word_grey”><input name=”Email” type=”text” id=”PWD224″ size=”50″>
*</td>
</tr>
<tr>
<td height=”28″ align=”center”>邮政编码:</td>
<td class=”word_grey”><input name=”postcode” type=”text” id=”postcode” size=”20″></td>
</tr>
<tr>
<td height=”28″ align=”center”>联系地址:</td>
<td class=”word_grey”><input name=”address” type=”text” id=”address” size=”50″></td>
</tr>
<tr>
<td height=”34″>&nbsp;</td>
<td class=”word_grey”><input name=”Button” type=”button” class=”btn_grey” value=”确定保存” onClick=”check(form1)”>
<input name=”Submit2″ type=”reset” class=”btn_grey” value=”重新填写”></td>
</tr>
</table>
</form>
</td>
</tr>
</table></td>
</tr>
</table>
<jsp:include page=”copyright.jsp”/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

相关的javascript文件

//判断用户的输入是否合法
function check(myform){
if (myform.UserName.value==”"){
alert(“请输入用户名!”);myform.UserName.focus();return;
}
if (myform.PWD1.value==”"){
alert(“请输入密码!”);myform.PWD1.focus();return;
}
if (myform.PWD1.value.length<6){
alert(“密码至少为6位,请重新输入!”);myform.PWD1.focus();return;
}
if (myform.PWD2.value==”"){
alert(“请确认密码!”);myform.PWD2.focus();return;
}
if (myform.PWD1.value!=myform.PWD2.value){
alert(“您两次输入的密码不一致,请重新输入!”);myform.PWD1.focus();return;
}
if(myform.cardNO.value==”"){
alert(“请证件号码!”);myform.cardNO.focus();return;
}
if (myform.Email.value==”"){
alert(“请输入Email地址!”);myform.Email.focus();return;
}
var i=myform.Email.value.indexOf(“@”);
var j=myform.Email.value.indexOf(“.”);
if((i<0)||(i-j>0)||(j<0)){
alert(“您输入的Email地址不正确,请重新输入!”);myform.Email.value=”";myform.Email.focus();return;
}
myform.submit();
}