Валидация формы
[JS]function validate() {
var userEmail = document.getElementById("username"); var userPas = document.getElementById("pas"); var regexp = new RegExp("^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$"); if(userEmail.value != regexp) { userEmail.style.border = "2px solid red"; return false; } if(userPas.value = "") { userPas.style.border = "2px solid red"; return false; } return true; }[JS] |
regexp.test(userEmail.value) [/JS] |
Переделал, но не работает
function validate() {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var regP = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z!@#$%^&*]{6,}/g;
var emm = $('#username').val();
var pass = $('#pas').val();
if(reg.test(emm)){
return true;
}
else{
$('#username').css('border','2px solid red');
return false;
}
if(regP.test(pass)){
return true;
}
else{
$('#pas').css('border','2px solid red');
return false;
}
}
|
LocoThatCould, что значит "не работает"?
Не работает и не делает то, что вам нужно - разные вещи. В вашем коде валидация пароля никогда не будет произведена. |
<input type='text' id = 'username'>
<button>Тест</button>
<script>
var userEmail = document.getElementById("username");
var regexp = new RegExp("^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$");
document.querySelector('button').onclick = function() {
if(!regexp.test(userEmail.value)) {
userEmail.style.border = "2px solid red";
} else {
userEmail.style.border = "2px solid green";
}
}
</script>
|
Вообщем нужно чтобы проводилась проверка корректности ввода email, через регулярное выражение, так же с паролем.. Почему пароль никогда не проверится?
|
Код работает не корректно.
|
Email заработал, еще вопрос в событии формы ONSUBMIT обязательно вписывать return для функции? можно об этом тему или инфу?
|
function validate() {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var regP = /^[a-zA-Z]$/;;
var emm = $('#username').val();
var pass = $('#pas').val();
if(reg.test(emm)){
return true;
}
else{
$('#username').css('border','2px solid red');
return false;
}
if(regP.test(pass)){
alert("Пароль должен содержать минимум 1 цифру,заглавную букву и 1 спец. символ!");
return false;
}
else{
$('#pas').css('border','2px solid red');
return false;
}
}
|
<input type='text' id = 'username'>
<input type='text' id = 'pas'>
<button>Тест</button>
<script>
document.querySelector('button').onclick = validate;
function validate() {
const expressions = {
email: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
password: /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z!@#$%^&*]{6,}/g
};
return !['username', 'pas'].filter((id, i) => {
const node = document.getElementById(id);
const isValid = (node.value.length && expressions[!i ? 'email' : 'password'].test(node.value));
node.style.borderColor = isValid ? 'green' : 'red';
return !isValid;
}).length;
}
</script>
|
LocoThatCould,
Цитата:
|
Работает но ничего не понятно, я с формой делал.
Это node js?
|
Цитата:
Код, который я представил написан на обычном js. Использовал методы массива и стрелочные функции. ps. Еще тернарный оператор. |
Без стрелочек и пр.
Email<input type='text' id = 'username'>
Password<input type='text' id = 'pass'>
<button>Тест</button>
<div id='result'></div>
<script>
var userEmail = document.getElementById("username"),
userPass = document.getElementById("pass");
var regexp = new RegExp("^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$");
var regexpP = new RegExp("^[a-zA-Z0-9!@#$%^&*]{6,16}$");
document.querySelector('button').onclick = function() {
result.textContent = validate();
}
function validate() {
var resultE = false, resultP = false;
if(!regexp.test(userEmail.value)) {
userEmail.style.border = "2px solid red";
} else {
userEmail.style.border = "2px solid green";
resultE = true;
}
if(!regexpP.test(userPass.value)) {
userPass.style.border = "2px solid red";
} else {
userPass.style.border = "2px solid green";
resultP = true;
}
return resultP && resultE;
}
</script>
|
19-ю строку из кода Dilettante_Pro можно удалить.
|
Цитата:
Нужно два отдельных и результирующий по and (изменил пример) Кстати, по регексу, использованному в вашем примере, мне не удается ввести корректный пароль |
Пароль в коде без стрелок не чекается..
|
Цитата:
А вот по примеру со стрелочками мне не удалось ввести корректный пароль |
Stop пропускает
Ввожу 2 символа в пароль в код из 14 поста и пропускает..
|
Прошу прощения, моя вина все работает.. добавил s в инпут пароля...
|
Dilettante_Pro,
Не подскажите как лучше сделать? Можно ли сместить Алерт? А то совсем не видно форму.. Еще заметил что при отсутствии логина и вводе корректного пароля, пароль, не подсвечивается зеленым... |
Цитата:
Цитата:
|
Переделал, все гуд
Все намана)
document.querySelector('button').onclick = function() {
result.textContent = validate();
}
Что делает эта строка? |
Цитата:
Результат выполнения функции записывается в <div id='result'></div> |
А мне нужно место блока вписать id формы?
А мне нужно место блока вписать id формы?
|
Как вы выводите в result без выборки?
|
LocoThatCould,
Цитата:
|
Я все не успакоюсь))
Крч при введении правильного пароля(по регулярке) и пустого email'a(или неправильного) происходит переадресация или перезагрузка и форма обновляется... т.к когда переходишь назад, то видно правильную работу скрипта:yes:
|
LocoThatCould, повешайте на форму обработчик события submit, если форма валидацию не прошла, то действие по умолчанию отменяйте(event.preventDefault()).
|
if(result = false) {
fr.event.preventDefault()
}
Верно? |
fr - это id формы..
|
Вставил после return result; в функции validate
|
if(!validate()) {
fr.preventDefault();
}
? |
Форма
<form id="fr" onsubmit="validate();"> |
Крч нашаманил, сам немогу понять как это работает но.. убрал result в
result = true; Хз, вот думаю как.. возвращается 2 result получается и происходит путанница? ДА поидее так.. остается 1 тру в email и 2 false.. крч я думаю лучше сделать 2 функции проверки чтобы два результата было и добавить проверку этих результатов.. Я верно думаю? |
var userEmail = document.getElementById("username"),
userPass = document.getElementById("pass")
var regexp = new RegExp("^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$");
var regexpP = new RegExp("^[a-zA-Z0-9!@#$%^&*]{6,16}$");
function validate() {
var result = false;
if(!regexp.test(userEmail.value)) {
userEmail.style.border = "2px solid red";
result = false;
alert('Некорректно введен Email!')
} else {
userEmail.style.border = "2px solid green";
result = true;
}
if(!regexpP.test(userPass.value)) {
userPass.style.border = "2px solid red";
result = false;
alert('Некорректно введен Пароль!')
} else {
userPass.style.border = "2px solid green";
}
return result;
}
|
document.querySelector('#fr').addEventListener('submit',function(e){
if(!validate())
e.preventDefault();
});
|
не робит)) можете фул версию со всем скриптом скинуть, а то мб я не туда поставил)
|
LocoThatCould,
<form id="fr">
<input type="text" id="username" />
<input type="password" id="pass" />
<input type="submit" />
</form>
<script>
document.querySelector('#fr').addEventListener('submit', function(e) {
if (!validate())
e.preventDefault();
});
var userEmail = document.getElementById("username"),
userPass = document.getElementById("pass"),
regexp = new RegExp("^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$"),
regexpP = new RegExp("^[a-zA-Z0-9!@#$%^&*]{6,16}$");
function validate() {
var result = regexp.test(userEmail.value);
if (!result) {
userEmail.style.border = "2px solid red";
alert('Некорректно введен Email!');
} else
userEmail.style.border = "2px solid green";
if (!regexpP.test(userPass.value)) {
result = false;
userPass.style.border = "2px solid red";
alert('Некорректно введен Пароль!')
} else
userPass.style.border = "2px solid green";
return result;
}
</script>
|
| Часовой пояс GMT +3, время: 13:50. |