学习要点：
1.问题所在
2.设置代码
注册验证功能，顾名思义就是验证表单中每个字段的合法性，如果全部合法才可以提交
表单。
一．问题所在
QQ截图20190517092452.png
界面 HTML
<div id="reg">
<h2><img src="images/close.png" alt="" class="close" />会员注册</h2>
<form name="reg">
<dl>
<dd>用 户 名：<input type="text" name="user" class="text" /> </dd>
<dd>密 码：<input type="password" name="pass" class="text" /></dd>
<dd>确认密码：<input type="password" name="notpass" class="text" /></dd>
<dd><span style="vertical-align:-2px;">提 问：</span><select name="ques">
<option value="0">- - - - 请选择 - - - -</option>
<option value="1">- - 您最喜欢吃的菜</option>
<option value="2">- - 您的狗狗的名字</option>
<option value="3">- - 您的出生地</option>
<option value="4">- - 您最喜欢的明星</option>
</select></dd>
<dd>回 答：<input type="text" name="ans" class="text" /></dd>
<dd>电子邮件：<input type="text" name="email" class="text" /></dd>
<dd class="birthday"><span style="vertical-align:-2px;">生 日：</span>
<select name="year">
<option value="0">- 请选择 -</option>
</select> 年
<select name="month">
<option value="0">- 请选择 -</option>
</select> 月
<select name="day">
<option value="0">- 请选择 -</option>
</select> 日</dd>
<dd style="height:105px;"><span style="vertical-align:85px;">
备 注：</span><textarea class=""></textarea></dd>
<dd style="padding:0 0 0 320px;">还能输入 200 字</dd>
<dd style="padding:0 0 0 80px;"><input type="button" class="submit" /></dd>
</dl>
</form>
</div>
CSS 界面
#reg {
width:600px;
height:550px;
border:1px solid #ccc;
position:absolute;
/*display:none;*/
z-index:9999;
background:#fff;
}
#reg h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
margin:0 0 20px 0px;
cursor:move;
}
#reg h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#reg dl {
margin:20px;
padding:0 0 20px 0;
font-size:14px;
color:#666;
}
#reg dl dd {
height:30px;
padding:5px 0;
}
#reg dl dd input, #reg dl dd select {
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
color:#666;
}
#reg dl dd select {
width:202px;
}
#reg dl dd.birthday select {
width:100px;
}
#reg dl dd textarea {
border:1px solid #ccc;
width:360px;
height:100px;
background:#fff
}
#reg dl dd input.submit {
width:143px;
height:33px;
background:url(images/reg.png) no-repeat;
border:none;
cursor:pointer;
margin:0 auto;
}
#reg dl dd span.info, #reg dl dd span.error {
display:none;
}
//注册框
var reg = $('#reg');
reg.center(600, 550).resize(function () {
if (reg.css('display') == 'block') {
screen.lock();
}
});
$('#header .reg').click(function () {
reg.center(600, 550).css('display', 'block');
screen.lock().animate({
attr : 'o',
target : 30,
t : 30,
step : 10
});
});
$('#reg .close').click(function () {
reg.css('display', 'none');
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
});
reg.drag($('#reg h2').last());
