JS_表单校验（注册界面设计）
设计效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url(img/register_bg2.png)
/* no-repeat center */
;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/* 让div水平居中 */
margin: auto;
margin-top: 90px;
}
.rg_left {
/* border: 1px solid red; */
float: left;
margin: 15px;
}
.rg_left>p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left>p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
/* border: 1px solid red; */
float: left;
margin-top: 20px;
}
.rg_right {
/* border: 1px solid red; */
float: right;
margin: 15px;
}
.rg_right>p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username,
#password,
#email,
#name,
#tel,
#birthday,
#checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/* 设置边框圆角 */
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
.error {
color: #FF0000;
}
#td_sub {
padding-left: 150px;
}
</style>
<script type="text/javascript">
/*
分析:
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
* 如果都为true，则监听器方法返回true
* 如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项。
3.给各个表单项绑定onblur事件
*/
window.onload = function() {
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function() {
//调用用户校验方法 checkUsername();
//调用密码校验方法 checkPassword();
//return checkUsername() && checkPassword();
return checkUsername() && checkPassword() && checkEmail() && checkName() && 
最低0.47元/天 解锁文章
2313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
