实验三 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()%> |