web-registration_web/script.js at main · Rio1210/web-registration_web · GitHub

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
const form = document.getElementById("form");
const user = document.getElementById('username');
const email = document.getElementById('email');
const pwd = document.getElementById('pwd');
const confirm_pwd = document.getElementById('confirm_pwd');

//function showError

function showError(input, mess) {
    const formcontrol = input.parentElement;
    formcontrol.className = 'form-control error';
    const small = formcontrol.querySelector('small');

    small.innerText = mess;
}


function showSuccess(input) {
    const formcontrol = input.parentElement;
    formcontrol.className = 'form-control success';

}

//check email valid
function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}


function checkusername(user) {

    if(user.value == ''){
        showError(user,'Username is required');
    } else if(user.value.length > 15) {
        showError(user,'username too long');
    }

    else {
        console.log(user.value);
        showSuccess(user);
    }

}

function checkemail(email) {
    if(email.value == ''){
        showError(email,'email is required');
    }

    else if(!validateEmail(email.value) ) {
        showError(email, 'invalid email')
    }

    else {
        console.log(email.value);
        showSuccess(email);
    }

}


function checkpwd(pwd) {

    // 8<=length<=21

    if(pwd.value == ''){
        showError(pwd,'password is required');
    }
    else if(pwd.value.length < 8 || pwd.value.length > 21) {

        showError(pwd, 'invalid length password')
    }

    else {
        showSuccess(pwd);
    }

}

function check_total_password(pwd, confirm_pwd) {
    if(pwd.value == ''){
        showError(pwd,'password is required');
    }
    else if(pwd.value.length < 8 || pwd.value.length > 21) {

        showError(pwd, 'invalid length password')
    }


    else if(pwd.value != confirm_pwd.value) {
        showError(pwd, 'password is not the same');
        showError(confirm_pwd, 'password is not the same');
}
    else {
        showSuccess(pwd);
        showSuccess(confirm_pwd);
    }
}


form.addEventListener('submit', function(e) {

    e.preventDefault();

    checkusername(user);

    checkemail(email);

    check_total_password(pwd, confirm_pwd)


})