15.10.2019, 18:16
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
Валидация input внутри div, а не внутри form
На сайте есть форма регистрации пользователей.
<div class="page_register clearfix">
<div class="w1200">
<div class="r_icon1"></div>
<div class="r_icon2"></div>
<div class="r_icon3"></div>
<div class="r_icon4"></div>
<div class="r_icon5"></div>
<form method="post" id="post_form" action="">
<div class="register_form">
<div class="mt">account_registratio</div>
<div class="item clearfix">
<div class="label">login_register_username</div>
<div class="item-text">
<input type="text" id="member_name" name="member_name" class="text" tabindex="1" placeholder=login_register_username_to_login/>
</div>
</div>
<div class="item clearfix">
<div class="label">
login_register_pwd </div>
<div class="item-text">
<input type="password" id="member_password" name="member_password" class="text" tabindex="1" placeholder=""/>
</div>
</div>
<div class="item clearfix">
<div class="label">
login_register_ensure_password </div>
<div class="item-text">
<input type="password" id="member_password_confirm" name="member_password_confirm" class="text" tabindex="1" placeholder=""/>
</div>
</div>
<div class="item">
<input type="submit" class="btn login-btn" value=login_register_login_now_4 />
</div>
</div>
</form>
</div>
</div>
<script>
$(function () {
$("#post_form").validate({
errorPlacement: function (error, element) {
var error_td = element.parent('.item-text');
error_td.append(error);
element.parents('.item:first').addClass('error');
},
success: function (label) {
label.parents('.item:first').removeClass('error').find('label').remove();
},
rules: {
member_name: {
required: true,
minlength: 3,
maxlength: 15,
remote: {
url: HOMESITEURL + '/Login/check_member.html',
type: 'get',
data: {
user_name: function () {
return $('#member_name').val();
}
}
}
},
member_password: {
required: true,
minlength: 6,
maxlength: 20
},
member_password_confirm: {
required: true,
equalTo: '#member_password'
},
},
messages: {
member_name: {
required: '<i class="iconfont"></i>login_register_input_username',
minlength: '<i class="iconfont"></i>login_register_username_range',
maxlength: '<i class="iconfont"></i>login_register_username_range',
remote: '<i class="iconfont"></i>login_register_username_exists'
},
member_password: {
required: '<i class="iconfont"></i>login_register_input_password',
minlength: '<i class="iconfont"></i>login_register_password_range',
maxlength: '<i class="iconfont"></i>login_register_password_range'
},
member_password_confirm: {
required: '<i class="iconfont"></i>login_register_input_password_again',
equalTo: '<i class="iconfont"></i>login_register_password_not_same'
},
}
});
});
</script>
Для валидации формы, в хедере размещен плагин
<script src="/jquery.validate.min.js?1"></script>
https://jqueryvalidation.org/
Я хочу поменять в форме тег form c id="post_form" на тег div, чтобы на странице регистрации не было формы и тем самым скрыть форму регистрации от ботов.
Далее я добавил скрипт который формирует скрытую форму с тегом form и при нажатии кнопки отправляет регистрацию. С этим всё получилось. В выше указанной форме этого кода нет, чтобы не нагромождать сейчас.
После замены form на div, валидатор конечно перестал работать.
Вопрос:
Как проверять псевдоформу с тегом div имеющим id="post_form" все input находящиеся внутри div?
|
|
15.10.2019, 18:24
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Vaska
|
чтобы на странице регистрации не было формы и тем самым скрыть форму регистрации от ботов
|
Умный бот просто поля будет искать, где бы они не были, особенно такие input type=" password" и с такими именами name="member_ password".
А плагин работает с формой, ее полями, методами, которых у div нет.
|
|
15.10.2019, 19:30
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
Сообщение от laimas
|
А плагин работает с формой, ее полями, методами, которых у div нет.
|
Понятно, что данный плагин не будет работать.
Какой плагин будет работать?
Кто может сделать, чтобы работало как я описал выше?
|
|
15.10.2019, 19:45
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Vaska
|
Какой плагин будет работать?
|
Не знаю такового, пишите свой код. А вообще поля формы можно разместить и вне тега form, то есть он будет пуст, и его можно запулить куда угодно на странице, как и сами поля разбросать по ней. Если при этом не именовать поля формы так "вкусно" для бота "password", "login" и т.п., а давать им случайные имена, которые живут только на время сессии, то жизнь боту можно усложнить. То есть к примеру так:
<input type="text" id="member_name" name="be5695717fb290b0234f1ea7d1b5386e[1]" class="text" tabindex="1" placeholder=""/>
<input type="password" id="member_password" name="be5695717fb290b0234f1ea7d1b5386e[2]" class="text" tabindex="1" placeholder=""/>
....
не помещать явных сладостей ( login_register_username_to_ login) в их атрибуты, а формировать их в объекте и скриптом добавлять, а тип поля "password" эмулировать типом "text", то уже это добавит неудобства боту. Чем больше программного в построении формы и случайного от сессии к сессии тем сложнее, каждый раз придется анализировать воочию скрипт, чтобы натравить потом на него собаку.
А что такое be5695717fb290b0234f1ea7d1b5386e[1], be5695717fb290b0234f1ea7d1b5386e[2], знает сервер, храня ключ be5695717fb290b0234f1ea7d1b5386e в сессии. Если будет прислан иной, значит левый запрос, так как либо ключа вообще нет в сессии, либо иной. По ключам [1], [2] как по индексам массива на сервере описывающем реальные имена полей можно их получить.
|
|
15.10.2019, 20:04
|
Профессор
|
|
Регистрация: 08.05.2017
Сообщений: 178
|
|
Ваш вариант хорош, но у меня есть уже готовое решение, которое хорошо работает уже несколько лет на другом сайте.
Моя задача адаптировать имеющееся решение на новом сайте, где прикручен валидатор, который проверяет логин нового пользователя - зарегистрирован пользователь с таким логином или нет, ну и другие поля.
Я уверен, что мою задачу сделает специалист.
Ок, вот такую скрытую форму создает скрипт, после нажания кнопки Отправить (login_register_login_now_4):
<form id="form" method="POST" name="post_form" action="">
<input type="hidden" id="member_name" name="member_name" class="text" tabindex="1" style="display: none;">
<input type="hidden" id="member_password" name="member_password" maxlength="11" class="text" tabindex="1" style="display: none;">
<input type="hidden" id="member_password_confirm" name="member_password_confirm" class="text" tabindex="1" style="display: none;">
</form>
Далее я добавил скрипт, которые проверяет input у скрытой формы:
function submitbutton() {
let form = document.post_form,
r = new RegExp("[^0-9A-Za-z]", "i");
e = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
// do field validation
if (form.member_name.value == "") {
alert( "Пожалуйста, введите Ваш логин." );
} else if (r.exec(form.member_name.value)) {
alert( "Пожалуйста, введите правильно Логин. Не должно быть пробелов, только символы 0-9,a-z,A-Z и длина больше 6 символов" );
} else if (form.member_password.value == "") {
alert( "Пожалуйста, введите пароль." );
} else if (form.member_password_confirm.value == "") {
alert( "Пожалуйста, введите пароль повторно." );
} else {
form.submit();
}
}
Как мне теперь, в этот скрипт, добавить проверку логина нового пользователя?
url: HOMESITEURL + '/Login/check_member.html',
В первом посте есть полностью этот код.
Последний раз редактировалось Vaska, 15.10.2019 в 20:06.
|
|
15.10.2019, 20:13
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Vaska
|
где прикручен валидатор
|
А я что предлагал его "открутить"? Я лишь говорю о способе построения формы, а ваш валидатор работает по именам полей, а как оно называется или "password", или "alligator", или "be5695717fb290b0234f1ea7d1b5386e[1]" валидатору по барабану, просто эти имена нужно укать и для валидатора, что вы собственно и делаете.
|
|
|
|