JEE_JSP2.与Javascript,Web页面交互
JSP与Javascript,Web页面交互:
通过Javascript验证文本框/密码框的值：
1.验证是否为空
View Code
<script language="javascript"> function check(){ if(form1.username.value==""){ alert("请输入用户名!"); } if(form1.pwd.value==""){ alert("请输入密码!"); } } </script>
View Code
<script language="javascript"> function check(){ if(document.getElementsByName("username")[0].value==""){ alert("请输入用户名!"); } if(document.getElementsByName("pwd")[0].value==""){ alert("请输入密码!"); } } </script>
2.验证两次输入密码是否相同
View Code
<script language="javascript"> function check(){ if(form1.pwd1.value != "" && form1.pwd2.value != ""){ if(form1.pwd1.value != form1.pwd2.value){ alert("您两次输入的密码不一致!"); } }else{ alert("请输入密码或确认密码!"); } } </script>
3.验证输入数据是否合法 验证用户名（3-20位字母、数字或下划线组成，并且必须以字母开头）：正则表达式
View Code
<script language="javascript"> function check(){ var regExp=/^[A-Za-z]([A-Za-z0-9]|[_]){2,19}$/; //正则表达式 if(regExp.test(form1.pwd1.value)){ alert("用户名合法!"); }else{ alert("用户名不合法!"); } } </script>
验证数值数据：isNaN(number)
View Code
<script language="javascript"> function check(){ if(!isNaN(form1.pwd1.value){ alert("您输入的数据是数值型!"); }else{ alert("您输入的数据不是数值型!"); } } </script>
验证邮箱地址：正则表达式
View Code
<script language="javascript"> function check(){ var regExp=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; if(regExp.test(form1.pwd1.value)){ alert("您输入的E-mail地址合法!"); }else{ alert("您输入的E-mail地址不合法!"); } } </script>
获取文本框/密码框的值：
View Code
<%request.setCharacterEncoding("GB18030");%> <%request.getParameter("username");%>
例：简易用户注册模块
index.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>通过简易用户注册模块说明文本框和密码域的应用</title> <script language="javascript"> function check(){ //判断用户名是否为空 if(form1.username.value==""){ alert("请输入用户名！");form1.username.focus();return false; } //判断用户名是否合法 var regExp=/^[A-Za-z]([A-Za-z0-9]|[_]){2,19}$/; //验证用户名的正则表达式对象 if(!regExp.test(form1.username.value)){ //判断用户名是否合法 alert("您输入的用户名不合法！");form1.username.focus();return false; } //判断密码是否为空 if(form1.pwd1.value==""){ alert("请输入密码！");form1.pwd1.focus();return false; } //判断是否确认密码 if(form1.pwd2.value==""){ alert("请确认密码！");form1.pwd2.focus();return false; } //判断两次输入的密码是否相等 if(form1.pwd1.value!=form1.pwd2.value){ alert("您两次输入的密码不一致！");form1.pwd1.focus();return false; } if(form1.email.value==""){ alert("请输入E-mail地址！");form1.email.focus();return false; } //判断E-mail地址是否合法 var regExp=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; //验证E-mail地址的正则表达式对象 if(!regExp.test(form1.email.value)){ //判断E-mail地址是否合法 alert("您输入的E-mail不合法！");form1.email.focus();return false; } } </script> </head> <body> <form name="form1" method="post" action="deal.jsp" onSubmit="return check()"> 用 户 名： <input name="username" type="text" id="username"> *<br> 密 码： <input name="pwd1" type="password" id="pwd1"> *<br> 确认密码： <input name="pwd2" type="password" id="pwd2"> *<br> E-mail： <input name="email" type="text" id="email" size="30"> *<br> <input type="submit" name="Submit" value="注册"> <input name="Reset" type="reset" id="Reset" value="重置"> </form> </body> </html>
deal.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <% request.setCharacterEncoding("GB18030"); //设置编码 String username=request.getParameter("username"); //获取用户名 String pwd=request.getParameter("pwd1"); //获取密码 String email=request.getParameter("email"); //获取E-mail %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>获取注册信息</title> </head> <body> 用户名：<%=username %> <br> 密 码：<%=pwd %> <br> E-mail：<%=email %> <br> <a href="index.jsp">返回</a> </body> </html>
例：限制多行文本框输入文本的长度
index.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>限制编辑框输入文本的长度</title> <script language="javascript"> function check(digit){ var str=form1.content.value;//获取输入文本 var n=0;//字符串的实际长度 for(i=0;i<str.length;i++){ //累加字符串的实际长度 if(str.charCodeAt(i)>255){ //判断字符是否为非字母和数字 n+=2; }else{ n++; } if(n>digit){ //判断是否超出限制 alert("不能超过"+digit+"个字符。"); break; //中止for循环语句 } } } </script> </head> <body> <form name="form1" method="post" action=""> 请输入内容：不能超过100个字符，每个汉字占两个字符<br> <textarea name="content" cols="20" rows="5"></textarea> <br> <input type="button" name="Button" value="判断" onClick="check(100)"> </form> </body> </html>
获取编辑框的值： 由于输入多行文本时，经常要对文本进行换行显示，但是如果直接通过getParameter()方法获取的字符串显示到JSP页面中，将不换行显示，即使在编辑框中通过<Enter>键强制换行。解决的办法是在输出文本前，将文本字符串中的回车换行符/n转换成HTML的换行符<br>。如：
View Code
<% request.setCharacterEncoding("GB18030"); String content=request.getParameter("content"); content=content.replaceAll("\r\n" , "<br>"); out.print(content); %>
例:通过Javascript获取单选按钮组的值:
View Code
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>通过JavaScript获取单选按钮组的值</title> <script language="javascript"> function get(){ for(i=0;i<form1.sex.length;i++){ //循环遍历单选按钮组 var sex=""; if(form1.sex[i].checked){//判断当前单选按钮是否被造中 sex=form1.sex[i].value; //获取单选按钮的值 break;//退出for循环 } } alert("性别："+sex);//显示获取到的值 } </script> </head> <body> <form name="form1" method="post" action=""> 性别： <input name="sex" type="radio" value="男" checked> 男 <input name="sex" type="radio" value="女"> 女 <input name="sex" type="radio" value="保密"> 保密<br> <br> <input type="button" name="Button" value="获取" onClick="get()"> </form> </body> </html>
获取单选按钮的值:
View Code
<%request.getParameter("sex");%>
例:通过Javascript实现复选框的全选和反选
index.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>通过JavaScript实现复选框的全选和反选</title> <script language="javascript"> //实现全选功能 function CheckAll(elements){ for(i=0;i<elements.length;i++){ //通过for循环将全部复选框设置为选中状态 elements[i].checked = true;//设置当前复选框为选中状态 } } </script> <script language="javascript"> //实现反选功能 function CheckInverse(elements){ for(i=0;i<elements.length;i++){//通过for循环将遍历全部复选框 if(elements[i].checked == true){ //判断当前复选框是否为选中状态 elements[i].checked = false;//设置当前复选框为非选中状态 }else{ elements[i].checked = true; //设置当前复选框为选中状态 } } } </script> </head> <body> <form name="form1" method="post" action=""> <table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" bordercolordark="#666666" bordercolorlight="#FFFFFF"> <tr> <td width="44" height="25" align="center"><input name="delId" type="checkbox" id="delId" value="1"></td> <td width="109"> 明日科技</td> <td width="147"> 超级管理员</td> </tr> <tr> <td height="25" align="center"><input name="delId" type="checkbox" id="delId" value="2"></td> <td> 无语</td> <td> 普通管理员</td> </tr> <tr> <td height="25" align="center"><input name="delId" type="checkbox" id="delId" value="3"></td> <td> wgh</td> <td> 普通会员</td> </tr> <tr> <td height="25" align="center"><input name="delId" type="checkbox" id="delId" value="4"></td> <td> sk</td> <td> 普通会员</td> </tr> </table> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" height="30" align="right"> [<span><a href="#" onClick="CheckAll(form1.delId)" style="color:#FF0000;">全选</a>/<a href="#" onClick="CheckInverse(form1.delId)" style="color:#FF0000;">反选</a></span>] </td> </tr> </table> </form> </body> </html>
获取复选框的值：
View Code
<% String[] delId=request.getParameterValues("delId"); //获取的是已选的值 //for循环遍历 for(int i=0; i<delId.length; i++){ out.print(delId[i]+" "); } %>
例:动态设置下拉列表框和多行列表框的默认选中项:
index.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <% String userBranch="Java Web"; //定义默认显示的部门 String[] branch={"Java","Java Web","Visual C++","PHP"}; //定义一个保存选项的数组 %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>动态设置下拉列表框的默认选中项</title> </head> <body> <form name="form1" method="post" action=""> <select name="branch" > <% for(int i=0;i<branch.length;i++){ %> <option value="<%= branch[i] %>" <% if(userBranch.equals(branch[i])) out.print("selected"); %> > <%= branch[i] %> </option> <% } %> </select> </form> </body> </html>
运行后的HTML源代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>动态设置下拉列表框的默认选中项</title> </head> <body> <form name="form1" method="post" action=""> <select name="branch" > <option value="Java" >Java</option> <option value="Java Web" selected>Java Web</option> <option value="Visual C++" >Visual C++</option> <option value="PHP" >PHP</option> </select> </form> </body> </html>
获取下拉列表框的值:
View Code
<% request.getParameter("branch");%>
//如果存在中文,要先设置请求的编码为支持中文的编码
例:获取多行列表框的值:
index.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>获取多行列表框的值</title> </head> <body> <form name="form1" method="post" action="deal.jsp"> <select name="zone" size="4" multiple> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="黑龙江省">黑龙江省</option> <option value="河北省">河北省</option> <option value="河南省">河南省</option> <option value="山西省">山西省</option> </select> <input type="submit" name="Submit" value="提交"> </form> </body> </html>
deal.jsp
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>显示结果</title> </head> <body> <% request.setCharacterEncoding("GB18030"); //设置编码 String[] zone=request.getParameterValues("zone"); //获取多行列表框的值 if(zone!=null){ //防止空指针异常 out.print("您选择了："); //通过for循环遍历获取到的数组 for(int i=0;i<zone.length;i++){ out.print(zone[i]+" "); //输出当前元素 } }else{ out.print("您没有进行任何选择！"); //输出提示信息 } %> <a href="index.jsp">[返回]</a> </body> </html>
