-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsignup.html
142 lines (141 loc) · 4.28 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
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sign up</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<script>
function phoneNumberValidation(phoneNumber)
{
var phoneno = /^\d{10}$/;
if(phoneNumber.match(phoneno))
{
return true;
}
else
{
alert("Enter valid 10 digit number like this 9876543210.");
return false;
}
}
function test_pass(password)
{
if(password.match(/[a-z]/g) && password.match(/[A-Z]/g) && password.match(/[0-9]/g) && password.match(/[^a-zA-Z\d]/g) && password.length >= 8)
{
return true;
}
else
{
alert("Password must have atleast 1 Uppercase, 1 Lowercase, 1 Digit, 1 Special Character and a minimum of 8 characters!!!")
return false;
}
}
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
alert("Enter Number");
return false;
}
return true;
}
function allLetters(evt)
{
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122))
{
alert("Enter letters only.");
return false;
}
return true;
}
function checklength()
{
var password = document.getElementById('password').value;
return true;
}
function ValidateEmail(mail)
{
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(mail.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
return false;
}
}
function validate()
{
var valid = true;
var email = document.getElementById('email').value;
var pass = document.getElementById('password').value;
var phone = document.getElementById('mobileno').value;
var cpass = document.getElementById('conpassword').value;
if(phone!='')
{
valid = phoneNumberValidation(phone);
}
if(email!='')
{
valid = ValidateEmail(email);
}
if(password!='')
{
valid = test_pass(pass);
}
if(pass != cpass)
{
valid = false;
alert("Paswords don't match!!!");
}
if(valid==false)
{
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<a href="index.html"><img alt="Mech"src="logo-pro.png" width="100px" height="100px" style="float:right; margin-right:10em;"></a>
<div class="container">
<section id="content">
<form name="myForm" action="submit.php" method="post" onsubmit="return validate();">
<h1>Sign Up!</h1>
<div>
<input type="text" placeholder="Full name" id="fullname" name="fullname" onkeypress="return allLetters(event)" required>
</div>
<div>
<input type="text" placeholder="Mobile no." id="mobileno" name="mobileno" onkeypress="return isNumberKey(event)" required>
</div>
<div>
<input type="text" placeholder="Address" id="address" name="address" required>
</div>
<div>
<input type="text" placeholder="Email" id="email" name="email" required>
</div>
<div>
<input type="password" placeholder="Password" id="password" name="password" required>
</div>
<div>
<input type="password" placeholder="Confirm password" id="conpassword" name="conpassword" required>
</div>
<div>
<button type="submit" class="btn btn-primary" id="submit">Register</button>
</div>
</form>
</section><!-- content -->
</div><!-- container -->
<div style="margin: 50px 0; display: flex; align-items: center; justify-content: center; width: 100%; font-size:36px;">
<a style="display: block; text-align: center; color: #555; text-decoration: none; margin-right: 15px; " href="index.html" ><i class="fas fa-home" style="color: #1da1f2; margin-right: 5px;"></i>Get back to our home page</a>
</div>
</body>
</html>