-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (114 loc) · 4.06 KB
/
index.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
<script>
//Sintaxe permitida: [email protected]
//Dentro do aarray domains de objDomains devem ser listados todos os domínios permitidos, os quais serão considerados válidos
let objDomains = {
domains: ['.com', '.br', '.edu', '.org']
}
//invalidChars retorna true se exisitir caracteres inválidos. A variável verify_server define se deve-se verificar os caracteres para o provedor (sendo true, nesse caso) ou se deve-se verificar o nomeusuaio (devendo ser setada para false, nesse caso)
function invalidChars(string, verify_provider = false) {
let i = 0
for (i = 0; i < string.length; i++) {
let char_ascii = string[i].charCodeAt(0)
//Para o nome do usuário, apenas o ponto é permitido dos caracteres especiais
if (string[i] == '.') {
continue
}
//Para o caso da verificação do nome do provedor, o hífen e o ponto serão permitidos dentre os caracteres especiais
if (string[i] == '-' && verify_provider == true) {
continue
}
if (char_ascii < 48 || (char_ascii >= 58 && char_ascii <= 64) || (char_ascii >= 91 && char_ascii <= 96) || char_ascii > 123) {
return true
}
}
return false
}
function emailSintaxValidator() {
let email = document.getElementById('email').value
//Não pode começar com números
if (!isNaN(email[0])) {
return false
}
//Não deve conter dois pontos seguidos um do outro
if (email.includes('..')) {
return false
}
//Deve conter um '@'
if (!email.includes('@')) {
return false
}
//O domínio é o último elemento depois do último ponto
let array_email = email.split('.')
let domain = '.' + array_email[array_email.length - 1]
//O domínio deve ser um dos listados
let i = 0
let one_equal = false
for (i = 0; i < objDomains.domains.length; i++) {
if (domain == objDomains.domains[i]) {
one_equal = true
}
}
if (!one_equal) {
return false
}
array_email = email.split('@')
if (array_email.length > 2) {
return false
}
let username = array_email[0]
if (username == '' || array_email[1] == '') {
return false
}
//O nomeusuario não deve apresentar caracteres inválidos
if (invalidChars(username)) {
return false
}
//O nome do provedor só pode apresentar o hífen e o ponto dentre os caractere especiais, como definido pela função
let provider = array_email[1].split(domain)[0]
if (invalidChars(provider, true)) {
return false
}
//O nome do provedor não pode começar com nenhum dos dois caracteres especiais permitidos para o nome do provedor
if (provider[0] == '.' || provider[0] == '-') {
return false
}
//O nome do provedor não deve conter hífen seguido de ponto (.-) ou ponto seguido de hífen (-.)
if (provider.includes('.-') || provider.includes('-.')) {
return false
}
//O domínio .com deve constituir os últimos caracteres do email
array_email = email.split(domain)
if (array_email[array_email.length - 1] != '') {
return false
}
return true
console.log('ok')
}
function verifyEmail () {
if (document.getElementById('email').value == '') {
alert('Missing email')
} else if (emailSintaxValidator()) {
document.getElementsByClassName('result-valid')[0].style.display = 'block'
document.getElementsByClassName('result-invalid')[0].style.display = 'none'
} else {
document.getElementsByClassName('result-invalid')[0].style.display = 'block'
document.getElementsByClassName('result-valid')[0].style.display = 'none'
}
}
let interval = setInterval(() => {
if (document.contains(document.getElementById('email'))) {
if (document.getElementById('email').value == '') {
document.getElementsByClassName('result-valid')[0].style.display = 'none'
document.getElementsByClassName('result-invalid')[0].style.display = 'none'
}
}
}, 50)
interval
</script>
<link rel="stylesheet" href="./css/style.css"/>
<div class="container">
<div class="display-none result-valid">Valid email</div>
<div class="display-none result-invalid">Invalid email</div>
<input type="text" id="email" name="email" placeholder="email">
<button onclick="verifyEmail()">Verify</button>
</div>