JSP入门教程之客户端验证、常用输出方式及JSTL基本用法
本文讲述了JSP入门教程之客户端验证、常用输出方式及JSTL基本用法。分享给大家供大家参考。具体如下:
一、目标:
①掌握客户端验证的基本过程;
②掌握JSP输出信息的方式;
③掌握JSTL的基本用法。
二、主要内容:
①通过实例介绍客户端验证的基本过程;
②介绍JSP输出信息的基本方式;
③通过实例分析介绍JSTL的基本用法。
客户端验证相关的代码在网络上随处可见,并且非常通用,所以一般情况下不需要大家自己编写,但是需要知道如何使用、如何修改。下面介绍基本的使用过程:
1、如何嵌入JavaScript代码
使用JavaSript代码完成用户输入信息的客户端验证,在页面中嵌入JavaScript代码的过程如下:
<scriptlanguage="JavaScript"> //在此处嵌入JavaScript代码 </script>
JavaScript代码必须在这个开始标识和结束标志之间。
2、如何写JavaScript方法
各种验证过程都是以方法的形式存在,JavaScript方法的定义方式如下:
function方法名(参数列表) { //方法体 }
与Java中的方法定义不同,function声明要定义方法,不需要返回值类型,可以返回任意结果,参数列表不需要给出参数的类型。下面是一个方法的例子:
functionvalidate(form) { … }
下面是一个完成用于判断参数是否是数字的方法:
//判断是否是数字 functionisNumber(str) { for(i=0;i<str.length;i++) { //如果要判断小数,需要判断小数点 if(str.charAt(i)>='0'&&str.charAt(i)<='9' ||str.charAt(i)=="-"&&i==0) continue; else returnfalse; } returntrue; }
3、如何建立表单提交与验证方法之间的关联?
使用表单form的onsubmit事件完成。
<formname="form1"method="post" action="process.jsp"onsubmit="returnisValidate(form1)">
其中:onsubmit="returnisValidate(form1)"部分是对验证方法的调用。
注意:这时候使用的是form的提交事件,使用的是提交按钮。
也可以把提交按钮修改成普通按钮,然后使用按钮的onClick事件调用验证方法。
4、在进行验证的时候要获取输入的信息,如果获取?
表单的名字直到表单元素,再得到值。例如:
userid=form.userid.value;
变量不需要定义可以直接使用。
5、实例:对注册功能中的用户名和口令进行验证
<%@pagecontentType="text/html;charset=gb2312"%> <scriptlanguage="JavaScript"> //进行验证的方法 functionisValidate(form){ userid=form.userid.value; if(userid==""){ alert("用户ID不能为空"); returnfalse; }elseif(userid.length>8||userid.length<6){ alert("长度应该为6-8位"); returnfalse; } userpass=form.userpass.value; if(userpass.length!=8){ alert("口令的长度不为8!"); returnfalse; } returntrue; } </script> 请注册<br> <formname="form1"method="post"action="process.jsp"onsubmit="returnisValidate(form1)"> 用户ID:<inputtype="text"name="userid">用户ID长度为6-8位<br> 口令:<inputtype="password"name="userpass">要求口令长度为8<br> 确认口令:<inputtype="password"name="userpass1"><br> 性别:<inputtype="radio"name="sex"value="男"checked>男 <inputtype="radio"name="sex"value="女">女<br> 爱好:<inputtype="checkbox"name="fav"value="运动">运动 <inputtype="checkbox"name="fav"value="音乐">音乐 <inputtype="checkbox"name="fav"value="编程">编程<br> 学历: <selectname="degree"> <optionvalue="本科">本科</option> <optionvalue="硕士">硕士</option> <optionvalue="专科">专科</option> <optionvalue="博士">博士</option> </select><br> 备注: <textareaname="comment"></textarea><br> <inputtype="submit"value="提交"><inputtype="reset"value="重置"> </form>
6、常用的验证:通过regiest.jsp文件介绍
这个验证不是最全面的,也不是最优的,如果你需要可以通过网络查找,另外可以查阅JavaScript相关书籍,有很多现成的JavaScript方法可以使用。另外在进行客户端验证的时候可以使用正则表达式,并且比较方便。
下面的代码供参考:
<%@pagecontentType="text/html;charset=gb2312"%> <scriptlanguage="JavaScript"> functionisValidate(form) { //得到用户输入的信息 userid=form.userid.value; username=form.username.value; userpass=form.userpass.value; userpass2=form.userpass2.value; birthday=form.birthday.value; email=form.email.value; address=form.address.value; phone=form.phone.value; //判断用户ID长度 if(!minLength(userid,6)) { alert("用户ID长度小于6位!"); form.userid.focus(); returnfalse; } if(!maxLength(userid,8)) { alert("用户ID长度大于8位!"); form.userid.focus(); returnfalse; } //判断用户名长度 if(!minLength(username,6)) { alert("用户名长度小于6位!"); form.username.focus(); returnfalse; } if(!maxLength(username,8)) { alert("用户名长度大于8位!"); form.username.focus(); returnfalse; } //判断口令长度 if(!minLength(userpass,6)) { alert("口令长度小于6位!"); form.userpass.focus(); returnfalse; } if(!maxLength(userpass,8)) { alert("口令长度大于8位!"); form.userpass.focus(); returnfalse; } //判断用户名和口令是否相同 if(username==userpass) { alert("用户名和口令不能相等!"); form.userpass.focus(); returnfalse; } //验证两次口令是否相同 if(userpass!=userpass2) { alert("两次输入的口令不相同!"); form.userpass.focus(); returnfalse; } //验证生日的格式是否正确 if(!isDate(birthday)) { alert("生日的格式不正确!"); form.birthday.focus(); returnfalse; } //验证email的格式是否正确 if(!isEmail(email)) { alert("Email格式不正确!"); form.email.focus(); returnfalse; } //验证电话号码的格式是否正确 if(!isDigital(phone)) { alert("电话号码的格式不正确"); form.phone.focus(); returnfalse; } //验证地址的长度是否正确 if(!maxLength(address,50)) { alert("地址长度大于50位!"); form.address.focus(); returnfalse; } returntrue; } //验证是否是空 functionisNull(str) { if(str.length==0) returntrue; else returnfalse; } //验证是否满足最小长度 functionminLength(str,length) { if(str.length>=length) returntrue; else returnfalse; } //判断是否满足最大长度 functionmaxLength(str,length) { if(str.length<=length) returntrue; else returnfalse; } //判断是否是数字 functionisDigital(str) { for(i=0;i<str.length;i++) { //允许使用连字符 if(str.charAt(i)>='0'&&str.charAt(i)<='9' ||str.charAt(i)=="-"&&i!=0&&i!=str.length-1) continue; else returnfalse; } returntrue; } //判断是否是整数 functionisNumber(str) { for(i=0;i<str.length;i++) { //如果要判断小数,需要判断小数点 if(str.charAt(i)>='0'&&str.charAt(i)<='9' ||str.charAt(i)=="-"&&i==0) continue; else returnfalse; } returntrue; } //判断是否是日期,日期的格式为1988-1-1 functionisDate(date) { //查找分隔符 index1=date.indexOf("-"); //如果分隔符不存在,则不是合法的时间 if(index1==-1) returnfalse; //获取时间中的年 year=date.substring(0,index1); //获取时间中的剩下部分 date=date.substring(index1+1); //查找第二个分隔符 index1=date.indexOf("-"); //如果不存在第二个分隔符,则不是合法的时间 if(index1==-1) returnfalse; //获取时间中的月份 month=date.substring(0,index1); //获取时间中的日 day=date.substring(index1+1); //判断是否是数字,如果不是则不是合法的时间 if(isNumber(year)&&isNumber(month)&&isNumber(day)) { //判断基本范围 if(year<1900||year>9999||month<1||month>12||day<1) returnfalse; //判断31天的月 if((month==1||month==3||month==5||month==7 ||month==8||month==10||month==12)&&day>31) returnfalse; //判断30天的月 if((month==4||month==6||month==9||month==11) &&day>30) returnfalse; //如果是2月,判断是否为润年 if(month==2) { if(year%400==0||(year%4==0&&year%100!=0)) { if(day>29) returnfalse; }else { if(day>28) returnfalse; } } } else returnfalse; returntrue; } //判断是否是Email functionisEmail(email) { if(email.length==0) returnfalse; index1=email.indexOf('@'); index2=email.indexOf('.'); if(index1<1//@符号不存在,或者在第一个位置 ||index2<1//.符号不存在,或者在第一个位置 ||index2-index1<2//.在@的左边或者相邻 ||index2+1==email.length)//.符号后面没有东西 returnfalse else returntrue; } </script> <html> <head> <title>注册界面</title> </head> <body> <h2align="center">请注册</h2> <formname="form1"action="register_confirm.jsp"method="post" onsubmit="returnisValidate(form1)"> <tablealign="center"> <tr><td>用户ID:</td><td><inputtype="text"name="userid"value="${param.userid}"></td></tr> <tr><td>用户ID:</td><td><inputtype="text"name="userid"></td></tr> <tr><td>用户名:</td><td><inputtype="text"name="username"></td></tr> <tr><td>口令:</td><td><inputtype="password"name="userpass"></td></tr> <tr><td>确认口令:</td><td><inputtype="password"name="userpass2"></td></tr> <tr><td>生日:</td><td><inputtype="text"name="birthday">格式为:1988-1-1</td></tr> <tr><td>学历:</td><td> <inputtype="radio"name="degree"value="专科">专科 <inputtype="radio"name="degree"value="本科"checked>本科 <inputtype="radio"name="degree"value="硕士研究生">硕士研究生 <inputtype="radio"name="degree"value="博士研究生">博士研究生 <inputtype="radio"name="degree"value="其他">其他</td></tr> <tr><td>地区:</td><td> <selectname="local"> <optionvalue="华东">华东</option> <optionvalue="华南">华南</option> <optionvalue="华北">华北</option> <optionvalue="东北">东北</option> <optionvalue="东南">东南</option> <optionvalue="西南">西南</option> <optionvalue="西北">西北</option> <optionvalue="东北">东北</option> <optionvalue="华中">华中</option> </select></td></tr> <tr><td>E-mail:</td><td><inputtype="text"name="email"></td></tr> <tr><td>地址:</td><td><inputtype="text"name="address"></td></tr> <tr><td>电话:</td><td><inputtype="text"name="phone"></td></tr> <tr><td>备注:</td><td> <textarearows="8"name="comment"cols="40"></textarea></td></tr> <tr><td><inputtype="reset"value="重置"></td><td> <inputtype="submit"value="提交"></td></tr> <table> </form> </body> </html>
7、主要的输出信息的方式
1)out.println("");
out是内部对象,可以直接使用,但是必须在脚本(<%%>)之内使用。尽量少用。
2)直接输出
如果是静态信息,可以直接在html语言中使用。包含HTML标签。
3)表达式<%=开始,以%>结束
例如:<%="使用表达式输出的信息"%>
4)表达式语言(EL)
要重点掌握。
基本格式:开始标识${结束标识}
可以输出各种信息:字符串类型的信息、对象、错误提示信息。
8、注释的用法
网页注释:<!--html注释 -->
Java注释://单行注释/**/多行注释
JSP注释:<%--JSP注释 --%>
9、在客户端进行了验证,在服务器段是否需要验证?
需要。
原因:客户端可以不通过输入界面直接访问处理文件,这样可以跳过客户端验证,如果不在服务器验证,数据将会有问题。
在客户端进行的验证主要是格式方面的验证,有些东西是必须在服务器端进行验证的。
10、JSTL概述
标准标签库是一些常用的功能,没有使用Java代码而使用了标签来实现。目标是在页面文件中不出现任何java代码。
标准标签库的组成部分:jstl.jar和standard.jar两个压缩包。
如何使用标准标签库:
1)首先需要把两个压缩包放到WEB-INF/lib下面,两个压缩包是标签库的实现文件和描述文件。
2)在页面中需要先声明:
<%@taglibprefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%>
通过<%@taglib%>进行声明。uri属性指出要使用的标记库的uri(唯一标识)。
prefix相当于对这个起的别名,在后面使用的时候使用这个别名。
3)调用标记库中的标记
<fmt:requestEncodingvalue="gb2312"/>
通过"别名+标签的名字"的方式调用这个标签,并设置相应的属性。
希望本文所述对大家的JSP程序设计有所帮助。