Я новичок в javascript, и у меня есть вопрос. У меня есть код с проверкой на валидность заполнение регистрационной формы. Я думал как ее можно упростить и пришел к выводу, что нужно создать отдельный метод и туда передавать нужные мне параметры, но столкнулся с проблемой, что не знаю с какого места их лучше передавать. Как это сделать лучше и правильно?
| Javascript |
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
| var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$");
document.getElementById("registration_form").addEventListener("submit", function(event) {
var fName = document.getElementById("fName").value;
var lName = document.getElementById("lName").value;
var email = document.getElementById("email").value;
var password = document.getElementById("pass").value;
var confirmPassword = document.getElementById("confPass").value;
document.getElementById("error_first_name").innerHTML = '';
document.getElementById("error_last_name").innerHTML = '';
document.getElementById("error_email").innerHTML = '';
document.getElementById("error_password").innerHTML = '';
document.getElementById("error_confirmPassword").innerHTML = '';
if (!namePattern.test(fName)) {
document.getElementById("error_first_name").innerHTML = 'Wrong first name! range: [4-20] and not contain numbers';
event.preventDefault();
} if (!namePattern.test(lName)) {
document.getElementById("error_last_name").innerHTML = 'Wrong last name! range: [4-20] and not contain numbers';
event.preventDefault();
} if(!emailPattern.test(email)){
document.getElementById("error_email").innerHTML = 'Wrong email! Your email should contains this symbols: [-_A-z0-9]';
event.preventDefault();
} if(!passwordPattern.test(password)){
document.getElementById("error_password").innerHTML = 'Wrong password! range: [8-20], minimum one upper case letter: [A] and minimum one figure';
event.preventDefault();
} if(confirmPassword != password){
document.getElementById("error_confirmPassword").innerHTML = 'Your passwords do not match';
event.preventDefault();
}
}) |
|
Моя форма:
| HTML5 |
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
| <form action="" id="registration_form">
<ul>
<div id="error_first_name" style="color: #ff0000"></div>
<li class="text-info">First Name: </li>
<li><input type="text" id="fName" placeholder="Your first name" value=""></li>
</ul>
<ul>
<div id="error_last_name" style="color: #ff0000"></div>
<li class="text-info">Last Name: </li>
<li><input type="text" id="lName" placeholder="Your last name" value=""></li>
</ul>
<ul>
<div id="error_email" style="color: #ff0000"></div>
<li class="text-info">Email: </li>
<li><input type="text" id="email" placeholder="Your email" value=""></li>
</ul>
<ul>
<div id="error_password" style="color: #ff0000"></div>
<li class="text-info">Password: </li>
<li><input type="password" id="pass" placeholder="Your password" value=""></li>
</ul>
<ul>
<div id="error_confirmPassword" style="color: #ff0000"></div>
<li class="text-info">Re-enter Password:</li>
<li><input type="password" id="confPass" placeholder="Confirm your password" value=""></li>
</ul>
<input type="submit" id="submit" value="Register Now">
<p class="click">By clicking this button, you agree to my modern style <a>Policy Terms and Conditions</a> to Use</p>
</form> |
|
Я пытаюсь уменьшить свой код, для этого я создал функцию, в которой передаю все параметры, которые мне нужны, но что я не делаю правильно. Теперь это выглядит так.
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
| var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$");
document.getElementById("registration_form").addEventListener("submit", function(event){
function getParam(value, pattern, error_value, error_message){
error_value.innerHTML = '';
if(!pattern.test(value)){
error_value.innerHTML = error_message;
event.preventDefault();
}
}
}) |
|
Но то, что я делаю, неверно, как я могу улучшить его и правильно передать мои параметры? Нужно ли передавать их с помощью html или как лучше будет это реализовать?
(
