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)显示用户注册信息的页面代码如下:显示用户注册信息 用户名: 密码: 确认: 用户真实姓名: 性别: 年龄: 出生: 地址: 介绍:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1