① 掌握客户端验证的基本过程；
② 掌握JSP输出信息的方式；
③ 掌握JSTL的基本用法。
二、主要内容：
① 通过实例介绍客户端验证的基本过程；
② 介绍JSP输出信息的基本方式；
③ 通过实例分析介绍JSTL的基本用法。
客户端验证相关的代码在网络上随处可见，并且非常通用，所以一般情况下不需要大家自己编写，但是需要知道如何使用、如何修改。下面介绍基本的使用过程：
1、如何嵌入JavaScript代码
使用JavaSript代码完成用户输入信息的客户端验证，在页面中嵌入JavaScript代码的过程如下：
<script language="JavaScript"> // 在此处嵌入JavaScript代码 </script>
JavaScript代码必须在这个开始标识和结束标志之间。
2、如何写JavaScript方法
各种验证过程都是以方法的形式存在，JavaScript方法的定义方式如下：
function 方法名(参数列表) { // 方法体 }
与Java中的方法定义不同，function声明要定义方法，不需要返回值类型，可以返回任意结果，参数列表不需要给出参数的类型。下面是一个方法的例子：
function validate(form) { … }
下面是一个完成用于判断参数是否是数字的方法：
// 判断是否是数字 function isNumber(str) { for(i=0;i<str.length;i++) { // 如果要判断小数，需要判断小数点 if(str.charAt(i)>='0' && str.charAt(i)<='9' || str.charAt(i)=="-" && i==0) continue; else return false; } return true; }
3、如何建立表单提交与验证方法之间的关联?
使用表单form的onsubmit事件完成。
<form method="post" action="process.jsp" onsubmit="return isValidate(form1)">
其中：onsubmit="return isValidate(form1)"部分是对验证方法的调用。
注意：这时候使用的是form的提交事件，使用的是提交按钮。
也可以把提交按钮修改成普通按钮，然后使用按钮的onClick事件调用验证方法。
4、在进行验证的时候要获取输入的信息，如果获取？
表单的名字直到表单元素，再得到值。例如：
复制代码 代码如下:
userid = form.userid.value;
变量不需要定义可以直接使用。
5、实例：对注册功能中的用户名和口令进行验证
<%@ page contentType="text/html;charset=gb2312"%> <script language="JavaScript"> // 进行验证的方法 function isValidate(form){ userid = form.userid.value; if(userid==""){ alert("用户ID不能为空"); return false; }else if(userid.length>8 || userid.length<6){ alert("长度应该为6－8位"); return false; } userpass=form.userpass.value; if(userpass.length!=8){ alert("口令的长度不为8！"); return false; } return true; } </script> 请注册<br> <form method="post" action="process.jsp" onsubmit="return isValidate(form1)"> 用户ID：<input type="text">用户ID长度为6－8位<br> 口令：<input type="password">要求口令长度为8<br> 确认口令：<input type="password"><br> 性别：<input type="radio" value="男" checked>男 <input type="radio" value="女">女<br> 爱好：<input type="checkbox" value="运动">运动 <input type="checkbox" value="音乐">音乐 <input type="checkbox" value="编程">编程<br> 学历： <select> <option value="本科">本科</option> <option value="硕士">硕士</option> <option value="专科">专科</option> <option value="博士">博士</option> </select><br> 备注： <textarea></textarea><br> <input type="submit" value="提交"><input type="reset" value="重置"> </form>
6、常用的验证：通过regiest.jsp文件介绍
这个验证不是最全面的，也不是最优的，如果你需要可以通过网络查找，另外可以查阅JavaScript相关书籍，有很多现成的JavaScript方法可以使用。另外在进行客户端验证的时候可以使用正则表达式，并且比较方便。
下面的代码供参考：
<%@ page contentType="text/html;charset=gb2312"%> <script language="JavaScript"> function isValidate(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(); return false; } if(!maxLength(userid,8)) { alert("用户ID长度大于8位！"); form.userid.focus(); return false; } // 判断用户名长度 if(!minLength(username,6)) { alert("用户名长度小于6位！"); form.username.focus(); return false; } if(!maxLength(username,8)) { alert("用户名长度大于8位！"); form.username.focus(); return false; } // 判断口令长度 if(!minLength(userpass,6)) { alert("口令长度小于6位！"); form.userpass.focus(); return false; } if(!maxLength(userpass,8)) { alert("口令长度大于8位！"); form.userpass.focus(); return false; } // 判断用户名和口令是否相同 if(username==userpass) { alert("用户名和口令不能相等！"); form.userpass.focus(); return false; } // 验证两次口令是否相同 if(userpass != userpass2) { alert("两次输入的口令不相同！"); form.userpass.focus(); return false; } // 验证生日的格式是否正确 if(!isDate(birthday)) { alert("生日的格式不正确！"); form.birthday.focus(); return false; } // 验证email的格式是否正确 if(!isEmail(email)) { alert("Email格式不正确！"); form.email.focus(); return false; } // 验证电话号码的格式是否正确 if(!isDigital(phone)) { alert("电话号码的格式不正确"); form.phone.focus(); return false; } // 验证地址的长度是否正确 if(!maxLength(address,50)) { alert("地址长度大于50位！"); form.address.focus(); return false; } return true; } // 验证是否是空 function isNull(str) { if(str.length==0) return true; else return false; } // 验证是否满足最小长度 function minLength(str,length) { if(str.length>=length) return true; else return false; } // 判断是否满足最大长度 function maxLength(str,length) { if(str.length<=length) return true; else return false; } // 判断是否是数字 function isDigital(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 return false; } return true; } // 判断是否是整数 function isNumber(str) { for(i=0;i<str.length;i++) { // 如果要判断小数，需要判断小数点 if(str.charAt(i)>='0' && str.charAt(i)<='9' || str.charAt(i)=="-" && i==0) continue; else return false; } return true; } // 判断是否是日期，日期的格式为1988-1-1 function isDate(date) { // 查找分隔符 index1 = date.indexOf("-"); // 如果分隔符不存在，则不是合法的时间 if(index1 == -1) return false; // 获取时间中的年 year = date.substring(0,index1); // 获取时间中的剩下部分 date = date.substring(index1+1); // 查找第二个分隔符 index1 = date.indexOf("-"); // 如果不存在第二个分隔符，则不是合法的时间 if(index1 == -1) return false; // 获取时间中的月份 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) return false; // 判断31天的月 if((month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) && day>31) return false; // 判断30天的月 if((month==4 || month==6 || month==9 || month==11) && day>30) return false; // 如果是2月，判断是否为润年 if(month==2) { if(year%400==0 || (year%4==0 && year%100!=0)) { if(day>29) return false; }else { if(day>28) return false; } } } else return false; return true; } // 判断是否是Email function isEmail(email) { if(email.length==0) return false; index1 = email.indexOf('@'); index2 = email.indexOf('.'); if(index1 < 1 // @符号不存在，或者在第一个位置 || index2 < 1 // .符号不存在，或者在第一个位置 || index2-index1 <2 // .在@的左边或者相邻 || index2+1 == email.length) // .符号后面没有东西 return false else return true; } </script> <html> <head> <title>注册界面</title> </head> <body> <h2>请注册</h2> <form action="register_confirm.jsp" method="post" onsubmit="return isValidate(form1)"> <table> <tr><td> 用户ID：</td><td><input type="text" value="${param.userid}"> </td></tr> <tr><td> 用户ID：</td><td><input type="text"> </td></tr> <tr><td> 用户名：</td><td><input type="text"> </td></tr> <tr><td> 口令：</td><td><input type="password"></td></tr> <tr><td> 确认口令：</td><td><input type="password"></td></tr> <tr><td> 生日：</td><td><input type="text">格式为：1988-1-1</td></tr> <tr><td> 学历：</td><td> <input type="radio" value="专科">专科 <input type="radio" value="本科" checked>本科 <input type="radio" value="硕士研究生">硕士研究生 <input type="radio" value="博士研究生">博士研究生 <input type="radio" value="其他">其他</td></tr> <tr><td> 地区：</td><td> <select> <option value="华东">华东</option> <option value="华南">华南</option> <option value="华北">华北</option> <option value="东北">东北</option> <option value="东南">东南</option> <option value="西南">西南</option> <option value="西北">西北</option> <option value="东北">东北</option> <option value="华中">华中</option> </select></td></tr> <tr><td> E-mail:</td><td><input type="text"></td></tr> <tr><td> 地址：</td><td><input type="text"></td></tr> <tr><td> 电话：</td><td><input type="text"></td></tr> <tr><td> 备注：</td><td> <textarea rows="8" cols="40"></textarea></td></tr> <tr><td> <input type="reset" value="重置"></td><td> <input type="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、 在客户端进行了验证，在服务器段是否需要验证？
需要。