老李-大连通过本文主要向大家介绍了JSP入门教程之客户端验证、常用输出方式及JSTL基本用法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文讲述了JSP入门教程之客户端验证、常用输出方式及JSTL基本用法。分享给大家供大家参考。具体如下：
一、目标：
① 掌握客户端验证的基本过程；
② 掌握JSP输出信息的方式；
③ 掌握JSTL的基本用法。
二、主要内容：
① 通过实例介绍客户端验证的基本过程；
② 介绍JSP输出信息的基本方式；
③ 通过实例分析介绍JSTL的基本用法。
客户端验证相关的代码在网络上随处可见，并且非常通用，所以一般情况下不需要大家自己编写，但是需要知道如何使用、如何修改。下面介绍基本的使用过程：
1、如何嵌入JavaScript代码
使用JavaSript代码完成用户输入信息的客户端验证，在页面中嵌入JavaScript代码的过程如下：
<script language="JavaScript"> // 在此处嵌入JavaScript代码 </script></div>
JavaScript代码必须在这个开始标识和结束标志之间。
2、如何写JavaScript方法
各种验证过程都是以方法的形式存在，JavaScript方法的定义方式如下：
function 方法名(参数列表)
{
// 方法体
}
</div>
与Java中的方法定义不同，function声明要定义方法，不需要返回值类型，可以返回任意结果，参数列表不需要给出参数的类型。下面是一个方法的例子：
function validate(form)
{
…
}
</div>
下面是一个完成用于判断参数是否是数字的方法：
// 判断是否是数字
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;
}
</div>
3、如何建立表单提交与验证方法之间的关联?
使用表单form的onsubmit事件完成。
<form name="form1" method="post" action="process.jsp" onsubmit="return isValidate(form1)"></div>
其中：onsubmit="return isValidate(form1)"部分是对验证方法的调用。
注意：这时候使用的是form的提交事件，使用的是提交按钮。
也可以把提交按钮修改成普通按钮，然后使用按钮的onClick事件调用验证方法。
4、在进行验证的时候要获取输入的信息，如果获取？
表单的名字直到表单元素，再得到值。例如：
变量不需要定义可以直接使用。
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 name="form1" method="post" action="process.jsp" onsubmit="return isValidate(form1)">
用户ID：<input type="text" name="userid">用户ID长度为6－8位<br>
口令：<input type="password" name="userpass">要求口令长度为8<br>
确认口令：<input type="password" name="userpass1"><br>
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
爱好：<input type="checkbox" name="fav" value="运动">运动
<input type="checkbox" name="fav" value="音乐">音乐
<input type="checkbox" name="fav" value="编程">编程<br>
学历：
<select name="degree">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="专科">专科</option>
<option value="博士">博士</option>
</select><br>
备注：
<textarea name="comment"></textarea><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
</div>
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("-");
// 如果分隔符不存在，则不是合法的时