-
Notifications
You must be signed in to change notification settings - Fork 0
/
registro.html
142 lines (137 loc) · 6.66 KB
/
registro.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 lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro - TOPGAMES</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="container-fluid">
<h1>TOPGAMES</h1>
<nav>
<a href="index.html" class="btn btn-primary">Volver al inicio</a>
</nav>
</header>
<main class="container">
<section class=" ">
<h2>Registro de Usuario</h2>
<form id="registroForm">
<div class="mb-3">
<label for="nombreCompleto" class="form-label">Nombre Completo</label>
<input type="text" class="form-control" id="nombreCompleto" name="nombreCompleto" required>
</div>
<div class="mb-3">
<label for="nombreUsuario" class="form-label">Nombre de Usuario</label>
<input type="text" class="form-control" id="nombreUsuario" name="nombreUsuario" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Correo Electrónico</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Contraseña</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirmar Contraseña</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
</div>
<div class="mb-3">
<label for="fechaNacimiento" class="form-label">Fecha de Nacimiento</label>
<input type="date" class="form-control" id="fechaNacimiento" name="fechaNacimiento" required>
</div>
<div class="campo">
<label for="region">Region:</label>
<select>
<option value="Arica y Parinacota">Arica y Parinacota</option>
<option value="Tarapacá">Tarapacá</option>
<option value="Antofagasta">Antofagasta</option>
<option value="Atacama">Atacama</option>
<option value="Coquimbo">Coquimbo</option>
<option value="Valparaíso">Valparaíso</option>
<option value="Metropolitana">Metropolitana</option>
<option value="O`Higgins">O`Higgins</option>
<option value="Maule">Maule</option>
<option value="Ñuble">Ñuble</option>
<option value="Biobío">Biobío</option>
<option value="La Araucania">La Araucania</option>
<option value="Los Ríos">Los Ríos</option>
<option value="Los Lagos">Los Lagos</option>
<option value="Aysén">Aysén</option>
<option value="Magallanes">Magallanes</option>
</select>
</div>
<div class="mb-3">
<label for="direccion" class="form-label">Dirección de Despacho (Opcional)</label>
<input type="text" class="form-control" id="direccion" name="direccion">
</div>
<button type="submit" class="btn btn-primary">Registrarse</button>
<button type="reset" class="btn btn-secondary">Limpiar</button>
</form>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function() {
$.validator.addMethod("minAge", function(value, element, min) {
var today = new Date();
var birthDate = new Date(value);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age >= min;
}, "Debes ser mayor de 13 años para registrarte.");
$("#registroForm").validate({
rules: {
nombreCompleto: "required",
nombreUsuario: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6,
maxlength: 18
},
confirmPassword: {
required: true,
equalTo: "#password"
},
fechaNacimiento: {
required: true,
minAge: 13
}
},
messages: {
nombreCompleto: "Por favor, ingresa tu nombre completo.",
nombreUsuario: "Por favor, ingresa un nombre de usuario.",
email: {
required: "Por favor, ingresa tu correo electrónico.",
email: "Por favor, ingresa un correo electrónico válido."
},
password: {
required: "Por favor, ingresa una contraseña.",
minlength: "La contraseña debe tener al menos 6 caracteres.",
maxlength: "La contraseña no puede exceder los 18 caracteres."
},
confirmPassword: {
required: "Por favor, confirma tu contraseña.",
equalTo: "Las contraseñas no coinciden."
},
fechaNacimiento: {
required: "Debes ingresar tu fecha de nacimiento."
}
}
});
});
</script>
</body>
</html>