-
Notifications
You must be signed in to change notification settings - Fork 85
/
signup.html
139 lines (139 loc) · 2.95 KB
/
signup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="js/jquery.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
.container{
width: 330px;
height: 430px;
margin: 0px auto;
margin-top: 50px;
color: #fff;
border-radius: 8px;
box-shadow: 5px 5px 6px #ccc;
background-color: #2196F3;
}
.info{
width: 100%;
height: 80px;
font-size: 28px;
text-align: center;
line-height: 80px;
}
label{
margin-left: 18px;
}
.form-group{
margin-top: 18px;
}
.form-input{
height: 33px;
width: 220px;
padding-left: 8px;
background-color: #F0FFFF;
border: 1px solid #ccc;
border-radius: 5px;
}
.radio{
margin-top: 15px;
}
.radio span{
margin-left: 18px;
}
.radio input{
margin-left: 26px;
}
.btn{
margin-top: 30px;
}
.form-btn{
height: 38px;
width: 300px;
color:#fff;
border: 1px solid #F44336;
margin-left: 15px;
background-color: #F44336;
border-radius: 5px;
box-shadow: 2px 2px 3px #CD8131;
}
</style>
</head>
<body>
<div class="container">
<div class="info">
<span>用户注册</span>
</div>
<form action="#">
<div class="form-group">
<p>
<label for="">用户名：</label>
<input type="text" class="form-input" name="username">
</p>
</div>
<div class="form-group">
<label for="">密 码：</label>
<input type="password" class="form-input" name="password">
</div>
<div class="form-group">
<label for="">邮 箱：</label>
<input type="password" class="form-input" name="password">
</div>
<div class="radio">
<span>性 别：</span>
<label><input type="radio" name="sex" value="male"> 男</label>
<label><input type="radio" name="sex" value="female"> 女</label>
</div>
<div class="form-group">
<label>城 市：</label>
<select class="form-input">
<option>珠海</option>
<option>深圳</option>
<option>杭州</option>
</select>
</div>
<div class="btn">
<input type="submit" value="注册" class="form-btn">
</div>
</form>
</div>
</body>
<script>
$('form').submit(function () {
var username = $('input[name=username]').val();
var password = $('input[name=password]').val();
var Email = $('input[name=Email]').val();
var age = $('input[name=age]').val();
var sex = $("input[name=sex]:checked").val();
if (username.length == 0) {
alert("用户名不能为空");
return false;
}
if (password.length == 0) {
alert("密码为空");
return false;
}
if (password.length < 6) {
alert("密码小于6位");
return false;
}
if (Email.indexOf('@') == -1){
alert("邮箱格式有误");
return false;
}
if (!sex) {
alert("请选择性别");
return false;
}
if(!parseInt(age) || parseInt(age)<1 || parseInt(age)>99){
alert("请输入1-99的数字");
return false;
}
});
</script>
</html>