实验三 web前端技术应用.docx
《实验三 web前端技术应用.docx》由会员分享，可在线阅读，更多相关《实验三 web前端技术应用.docx（17页珍藏版）》请在冰点文库上搜索。
实验三web前端技术应用
实验三Web前端技术应用
一、实验目的：
1．进一步熟悉DreamweaverCS5的应用
2．进一步练习CSS的应用
3．进一步练习浏览器端动态脚本语言JavaScript的应用
4．学习正则表达式
二、实验时间：
2013.9.25
三、实验地点：
C2-101
四、实验内容：
（一）掌握以下三个知识点
知识点1：
静态页面用样式修饰
[实践后回答：
如何在HTML页面中使用CSS层叠样式表，即CSS的格式与应用形式有哪些？
HTML和CSS的注释方式是什么？
]
1.请完成“030059-03.pdf”文件中的CSS_1.html、CSS_2.html和CSS_3.html三个任务。
2.分析以下内容，找出错误之处。
图1（原图）
--将样式表login.css引入到HTML文件中-->
注意：
以下注册表单通过post方法提交给“check.jsp”文件处理！
用户名：
140px;height:
30;"class="ys">
密 码：
140px;height:
30;"class="ys">
确认密码：
140px;height:
30;"class="ys">
性别：
男
女
职业：
学生
军人
经理
自由人
注：
可选项目为：
学生，军人，经理，自由人，默认选择“学生”
个人爱好：
电脑网络
影视娱乐
棋牌娱乐
读书读报
美酒佳肴
绘画书法
个人说明：
15行，40列
图2（加入CSS后）
login.css的内容如下：
.ys{color:
red}
.td{font-size:
14pt;color:
#3300CC}
知识点2：
使用JavaScrip在客户端进行数据验证
functioncheck（）
{
if（form1.username.value.length<5||form1.username.value.length>20）
{
alert（"姓名长度不符合要求"）;
returnfalse
}
}
注意：
以下注册表单通过post方法提交给“check.jsp”文件处理！
用户名：
密码：
……
……
[思考后回答：
JavaScrip代码可以放在HTML文件的何处？
以上代码的功能是什么？
使用JavaScrip进行数据验证有何优势？
]
知识点3：
在某表单中有以下内容：
男
女
[思考后回答：
label标签可用于所有的HTML标记中么？
]
（二）4.9.1注册表单验证的实例——请注释
参考阅读：
（三）4.9.2根据输入值自动计算的实例——请注释
（四）正则表达式的应用
学习：
验证数字：
^[0-9]*$
验证n位的数字：
^\d{n}$
验证至少n位数字：
^\d{n,}$
验证m-n位的数字：
^\d{m,n}$
验证零和非零开头的数字：
^（0|[1-9][0-9]*）$
验证有两位小数的正实数：
^[0-9]+（.[0-9]{2}）?
$
验证有1-3位小数的正实数：
^[0-9]+（.[0-9]{1,3}）?
$
验证非零的正整数：
^\+?
[1-9][0-9]*$
验证非零的负整数：
^\-[1-9][0-9]*$
验证非负整数（正整数+0）^\d+$
验证非正整数（负整数+0）^（（-\d+）|（0+））$
验证长度为3的字符：
^.{3}$
验证由26个英文字母组成的字符串：
^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：
^[A-Z]+$
验证由26个小写英文字母组成的字符串：
^[a-z]+$
验证由数字和26个英文字母组成的字符串：
^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串：
^\w+$
验证用户密码:
^[a-zA-Z]\w{5,17}$正确格式为：
以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
验证是否含有^%&',;=?
$\"等字符：
[^%&',;=?
$\x22]+
验证汉字：
^[\u4e00-\u9fa5],{0,}$
验证Email地址：
^\w+[-+.]\w+）*@\w+（[-.]\w+）*\.\w+（[-.]\w+）*$
验证InternetURL：
^http:
//（[\w-]+\.）+[\w-]+（/[\w-./?
%&=]*）?
$；^[a-zA-z]+:
//（w+（-w+）*）（.（w+（-w+）*））*（?
S*）?
$
验证电话号码：
^（\（\d{3,4}\）|\d{3,4}-）?
\d{7,8}$：
--正确格式为：
XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
验证身份证号（15位或18位数字）：
^\d{15}|\d{}18$
验证一年的12个月：
^（0?
[1-9]|1[0-2]）$正确格式为：
“01”-“09”和“1”“12”
验证一个月的31天：
^（（0?
[1-9]）|（（1|2）[0-9]）|30|31）$正确格式为：
01、09和1、31。
整数：
^-?
\d+$
非负浮点数（正浮点数+0）：
^\d+（\.\d+）?
$
正浮点数^（（[0-9]+\.[0-9]*[1-9][0-9]*）|（[0-9]*[1-9][0-9]*\.[0-9]+）|（[0-9]*[1-9][0-9]*））$
非正浮点数（负浮点数+0）^（（-\d+（\.\d+）?
）|（0+（\.0+）?
））$
负浮点数^（-（（[0-9]+\.[0-9]*[1-9][0-9]*）|（[0-9]*[1-9][0-9]*\.[0-9]+）|（[0-9]*[1-9][0-9]*）））$
浮点数^（-?
\d+）（\.\d+）?
详细出处参考：
五、实验课后总结：
1、HTML几个需要注意的地方
2、Jquery是什么？
拓展阅读
（1）创建名称为“UserInfo.java”类文件，该文件的主要代码如下：
packagecom;
publicclassUserInfo{
privateStringusername="";
privateStringpassword="";
privateStringrepassword="";
privateStringrealname="";
privateStringsex="";
privateStringage="";
privateStringborn="";
privateStringaddress="";
privateStringintroduce="";
publicStringgetUsername（）{
returnusername;
}
publicvoidsetUsername（Stringusername）{
this.username=username;
}
publicStringgetPassword（）{
returnpassword;
}
publicvoidsetPassword（Stringpassword）{
this.password=password;
}
publicStringgetRepassword（）{
returnrepassword;
}
publicvoidsetRepassword（Stringrepassword）{
this.repassword=repassword;
}
publicStringgetRealname（）{
returnrealname;
}
publicvoidsetRealname（Stringrealname）{
this.realname=realname;
}
publicStringgetSex（）{
returnsex;
}
publicvoidsetSex（Stringsex）{
this.sex=sex;
}
publicStringgetAge（）{
returnage;
}
publicvoidsetAge（Stringage）{
this.age=age;
}
publicStringgetBorn（）{
returnborn;
}
publicvoidsetBorn（Stringborn）{
this.born=born;
}
publicStringgetAddress（）{
returnaddress;
}
publicvoidsetAddress（Stringaddress）{
this.address=address;
}
publicStringgetIntroduce（）{
returnintroduce;
}
publicvoidsetIntroduce（Stringintroduce）{
this.introduce=introduce;
}
}
（2）用户注册页面的代码如下：
<%@pagecontentType="text/html;charset=gb2312"language="java"
import="java.sql.*"errorPage=""%>
用户注册
functionuserCheck（）{
if（document.form1.username.value==""）{
window.alert（"请输入用户名"）;
returnfalse;
}
if（document.form1.password.value==""）{
window.alert（"请输入用户密码"）;
returnfalse;
}
if（document.form1.repassword.value==""）{
window.alert（"请输入密码确认"）;
returnfalse;
}
if（document.form1.repassword.value!
=document.form1.password.value）{
window.alert（"您输入的两次密码并不相同"）;
returnfalse;
}
if（document.form1.realname.value==""）{
window.alert（"请输入用户真实姓名！
"）;
returnfalse;
}
if（document.form1.realname.value==""）{
window.alert（"请输入用户真实姓名！
"）;
returnfalse;
}
if（document.form1.age.value==""）{
window.alert（"请输入用户年龄！
"）;
returnfalse;
}
if（document.form1.born.value==""）{
window.alert（"请输入出生日期"）;
returnfalse;
}
if（document.form1.address.value==""）{
window.alert（"请输入地址"）;
returnfalse;
}
if（document.form1.introduce.value==""）{
window.alert（"请输入自我介绍"）;
returnfalse;
}
returntrue;
}
| 用户名： | |
| 密码： | |
| 确认： | |
| 用户真实姓名： | |
| 性别： | 男 女 |
| 年龄： | |
| 出生： | |
| 地址： | |
| 介绍： | |
type="reset"name="Submit2"value="重置">
（3）显示用户注册信息的页面代码如下：
<%@pagecontentType="text/html;charset=gb2312"language="java"
import="java.sql.*"errorPage=""%>
显示用户注册信息<%request.setCharacterEncoding（"gb2312"）;%>
useBeanid="userInfo"scope="request"class="com.UserInfo"/>
setPropertyname="userInfo"property="*"/>
| 用户名： | <%=userInfo.getUsername（）%> |
| 密码： | <%=userInfo.getPassword（）%> |
| 确认： | <%=userInfo.getRepassword（）%> |
| 用户真实姓名： | <%=userInfo.getRealname（）%> |
| 性别： | <%=userInfo.getSex（）%> |
| 年龄： | <%=userInfo.getAge（）%> |
| 出生： | <%=userInfo.getBorn（）%> |
| 地址： | <%=userInfo.getAddress（）%> |
| 介绍： | <%=userInfo.getIntroduce（）%> |
升级会员 