实验三 web前端技术应用.docx

1、实验三 web前端技术应用实验三 Web前端技术应用一、 实验目的：1 进一步熟悉Dreamweaver CS5的应用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.

2、 分析以下内容，找出错误之处。图1（原图） 注意：以下注册表单通过post方法提交给“check.jsp”文件处理！ 用户名：     密 码：      确认密码： 性别：    男 女 职业：    学生 军人 经理 自由人     注：可选项目为：学生，军人，经理，自由人，默认选择“学生”个人爱好：电脑网络影视娱乐棋牌娱乐      &ems

3、p; 读书读报美酒佳肴绘画书法个人说明：15行，40列    图2（加入CSS后）login.css的内容如下：.yscolor:red .tdfont-size:14pt;color:#3300CC知识点2：使用JavaScrip在客户端进行数据验证function check() if (form1.username.value.length20) alert(姓名长度不符合要求); return false 注意：以下注册表单通过post方法提交给“check.jsp”文件处理！ 用户名：   密码：   &

4、nbsp;思考后回答：JavaScrip代码可以放在HTML文件的何处？以上代码的功能是什么？使用JavaScrip进行数据验证有何优势？知识点3：标签的应用在某表单中有以下内容：男 女 思考后回答：label标签可用于所有的HTML标记中么？（二）4.9.1 注册表单验证的实例请注释参考阅读：（三）4.9.2 根据输入值自动计算的实例请注释（四）正则表达式的应用学习： 验证数字：0-9*$ 验证n位的数字：dn$ 验证至少n位数字：dn,$ 验证m-n位的数字：dm,n$ 验证零和非零开头的数字：(0|1-90-9*)$ 验证有两位小数的正实数：0-9+(.0-92)?$ 验证有1-3位小数

5、的正实数：0-9+(.0-91,3)?$ 验证非零的正整数：+?1-90-9*$ 验证非零的负整数：-1-90-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-Zw5,17$ 正确格式为：以字母开头，长度在6-18之间

6、，只能包含字符、数字和下划线。 验证是否含有 %&,;=?$ 等字符：%&,;=?$x22+ 验证汉字：u4e00-u9fa5,0,$ 验证Email地址：w+-+.w+)*w+(-.w+)*.w+(-.w+)*$ 验证InternetURL：http:/(w-+.)+w-+(/w-./?%&=*)?$ ；a-zA-z+:/(w+(-w+)*)(.(w+(-w+)*)*(?S*)?$ 验证电话号码：(d3,4)|d3,4-)?d7,8$：-正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。 验证

7、身份证号（15位或18位数字）：d15|d18$ 验证一年的12个月：(0?1-9|10-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-90-9*)|(0-9*1-90-9*.0-9+)|(0-9*1-90-9*)$ 非正浮点数（负浮点数 + 0） (-d+(.d+)?)|(0+(.0+)?)$ 负浮点数 (-(0-9+.0-9*1-90-9*)|(0-9*1-90-9*.0

8、-9+)|(0-9*1-90-9*)$ 浮点数 (-?d+)(.d+)?详细出处参考：五、 实验课后总结：1、HTML 几个需要注意的地方2、Jquery是什么？拓展阅读（1）创建名称为“UserInfo.java”类文件，该文件的主要代码如下：package com;public class UserInfo private String username=; private String password=; private String repassword=; private String realname=; private String sex=; private String a

9、ge=; private String born=; private String address=; private String introduce=; public String getUsername() return username; public void setUsername(String username) this.username = username; public String getPassword() return password; public void setPassword(String password) this.password = passwor

10、d; public String getRepassword() return repassword; public void setRepassword(String repassword) this.repassword = repassword; public String getRealname() return realname; public void setRealname(String realname) this.realname = realname; public String getSex() return sex; public void setSex(String

11、sex) this.sex = sex; public String getAge() return age; public void setAge(String age) this.age = age; public String getBorn() return born; public void setBorn(String born) this.born = born; public String getAddress() return address; public void setAddress(String address) this.address = address; pub

12、lic String getIntroduce() return introduce; public void setIntroduce(String introduce) this.introduce = introduce; （2）用户注册页面的代码如下：用户注册 function userCheck() if (document.form1.username.value = ) window.alert(请输入用户名); return false; if (document.form1.password.value = ) window.alert(请输入用户密码); return fa

13、lse; if (document.form1.repassword.value = ) window.alert(请输入密码确认); return false; if (document.form1.repassword.value != document.form1.password.value) window.alert(您输入的两次密码并不相同); return false; if (document.form1.realname.value = ) window.alert(请输入用户真实姓名！); return false; if (document.form1.realname.

14、value = ) window.alert(请输入用户真实姓名！); return false; if (document.form1.age.value = ) window.alert(请输入用户年龄！); return false; if (document.form1.born.value = ) window.alert(请输入出生日期); return false; if (document.form1.address.value = ) window.alert(请输入地址); return false; if (document.form1.introduce.value = ) window.alert(请输入自我介绍); return false; return true; 用户名： 密码： 确认： 用户真实姓名： 性别：  男    女 年龄： 出生： 地址： 介绍： （3）显示用户注册信息的页面代码如下：显示用户注册信息 用户名： 密码： 确认： 用户真实姓名： 性别： 年龄： 出生： 地址： 介绍：