实验三 web前端技术应用Word文档格式.docx
《实验三 web前端技术应用Word文档格式.docx》由会员分享，可在线阅读，更多相关《实验三 web前端技术应用Word文档格式.docx（17页珍藏版）》请在冰点文库上搜索。
method="
post"
name="
form1"
用户名：
&
nbsp;
inputtype="
text"
username"
style="
width:
140px;
height:
30;
"
class="
ys"
密&
emsp;
码：
password"
pass1"
确认密码：
pass2"
性别：
radio"
sex"
value="
male"
checked/>
男
female"
/>
女<
职业：
<
selectsize="
1"
job"
optionselected="
selected"
学生<
/option>
optionvalue=”soldier”>
军人<
optionvalue=”manager”>
经理<
optionvalue=”freelance”>
自由人<
/select>
&
fontcolor="
red"
注：
可选项目为：
学生，军人，经理，自由人，默认选择“学生”<
/font>
br/>
个人爱好：
checkbox"
love"
电脑网络"
电脑网络
影视娱乐"
影视娱乐
棋牌娱乐"
棋牌娱乐<
读书读报"
读书读报
美酒佳肴"
美酒佳肴
绘画书法"
绘画书法<
个人说明：
textareaname="
description"
rows="
15"
cols="
40"
dt"
15行，40列
/textarea>
submit"
提交"
reset"
重置"
/form>
/body>
/html>
图2（加入CSS后）
login.css的内容如下：
.ys{color:
red}
.td{font-size:
14pt;
color:
#3300CC}
知识点2：
使用JavaScrip在客户端进行数据验证
stylesheet"
scriptlanguage="
javascript"
functioncheck（）
{
if（form1.username.value.length<
5||form1.username.value.length>
20）
{
alert（"
姓名长度不符合要求"
）;
returnfalse
}
}
/script>
onsubmit="
returncheck（）"
用户名：
密码：
……
[思考后回答：
JavaScrip代码可以放在HTML文件的何处？
以上代码的功能是什么？
使用JavaScrip进行数据验证有何优势？
知识点3：
label>
标签的应用
在某表单中有以下内容：
labelfor="
男<
/label>
id="
br/>
女<
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="
%>
metahttp-equiv="
Content-Type"
content="
linkhref="
CSS/style.css"
rel="
title>
用户注册<
/title>
scripttype="
text/javascript"
functionuserCheck（）{
if（document.form1.username.value=="
）{
window.alert（"
请输入用户名"
returnfalse;
}
if（document.form1.password.value=="
请输入用户密码"
if（document.form1.repassword.value=="
请输入密码确认"
if（document.form1.repassword.value!
=document.form1.password.value）{
您输入的两次密码并不相同"
}
if（document.form1.realname.value=="
请输入用户真实姓名！
if（document.form1.age.value=="
请输入用户年龄！
if（document.form1.born.value=="
请输入出生日期"
if（document.form1.address.value=="
请输入地址"
if（document.form1.introduce.value=="
请输入自我介绍"
returntrue;
showUserInfo.jsp"
onSubmit="
returnuserCheck（）"
tablewidth="
409"
border="
tr>
td>
用户名：
/td>
/tr>
密码：
确认：
repassword"
用户真实姓名：
realname"
性别：
男"
checked="
checked"
男&
女"
女
年龄：
age"
出生：
born"
地址：
address"
介绍：
introduce"
5"
/table>
Submit"
注册"
input
Submit2"
（3）显示用户注册信息的页面代码如下：
显示用户注册信息<
%request.setCharacterEncoding（"
gb2312"
jsp:
useBeanid="
userInfo"
scope="
request"
com.UserInfo"
/>
setPropertyname="
property="
*"
%=userInfo.getUsername（）%>
%=userInfo.getPassword（）%>
%=userInfo.getRepassword（）%>
%=userInfo.getRealname（）%>
%=userInfo.getSex（）%>
%=userInfo.getAge（）%>
%=userInfo.getBorn（）%>
%=userInfo.getAddress（）%>
%=userInfo.getIntroduce（）%>
升级会员 