Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Валидация пароля и подтверждения при регистрации в битрикс

Просмотров: 14264

Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистрации сайта под управлением Битрикс. Проверять будем с помощью javascript прямо на лету: на количество символов в пароле и совпадениt подтверждения пароля...пароля.

Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистрации сайта под управлением Битрикс. Проверять будем с помощью javascript прямо на лету: на количество символов в пароле и совпадениt подтверждения пароля...пароля.

Итак: имеем страницу на сайте, на которую вывели стандартную форму регистрации main.register. Копируем ее шаблон в шаблон своего сайта и открываем на редактирование template.php это шаблона

Находим два input которые отвечают за пароль и подтверждение пароля

Примерно: 86-ая строчка - ввод пароля

<input 
  size="30" 
  type="password" 
  name="REGISTER[<?=$FIELD?>]" 
  value="<?=$arResult["VALUES"][$FIELD]?>" 
  autocomplete="off" 
  class="bx-auth-input" />

и 103-ая строчка- подтверждение пароля

<input
  size="30"
  type="password"
  name="REGISTER[<?=$FIELD?>]"
  value="<?=$arResult["VALUES"][$FIELD]?>"
  autocomplete="off" />

И приводим каждое вот к такому виду:

Ввод пароля:


<input
  type="password"
  name="REGISTER[<?=$FIELD?>]" 
  autocomplete="off" 
  class="bx-auth-input" 
  id="pass_id" 
  maxlength="20" size="40" 
  onkeypress="CountPass('pass_id')" onfocus="CountPass('pass_id')" 
  onkeyup="CountPass('pass_id')" value="" /> 
<div id="pass_correct"></div> 
<i>Вы ввели <span id="pass_view">0</span> символов</i>

Подтверждение пароля:

<input
type="password"
  name="REGISTER[<?=$FIELD?>]"
  autocomplete="off"
  size="30"
  id="repass_id" 
  onkeypress="CorrectPass('repass_id')" onfocus="CorrectPass('repass_id')" 
  onkeyup="CorrectPass('repass_id')" value="" /> 
 <div class="arrows_ook" id="repass_correct"></div>

И размещаем тут же или во внешнем подключаемом файле вот такой скрипт- комментарии по скрипту внутри

<script type="text/javascript"> 
function CountPass(item) {  
  //Назначаем ID поля с паролем 
  var item_view = 'pass_view'; 
  //назначаем ID блока для вывода сообщения 
  var item_correct = 'pass_correct'; 
  //Проверяем колличество символов в поле 
  document.getElementById(item_view).innerHTML = document.getElementById(item).value.length++; 
  //если символов 6 и более 
  if (document.getElementById(item).value.length >= 6) { 
    document.getElementById(item_correct).innerHTML = '<img src="/пути к картинке ОКЕЙ">';  
  } 
  else { //Если смволов меньше шести 
    document.getElementById(item_correct).innerHTML = '<img src="/пути к картинке НЕ ОКЕЙ">'; 
  } 
} 
  
function CorrectPass(item) { 
//Проверяем совпадение пароля с полем ввода пароля 
  var item_pass_value = document.getElementById('pass_id').value; 
  var item_pass_length = document.getElementById('pass_id').value.length 
  //назначаем ID блока для вывода сообщения иколичество символов 
  var item_correct = 'repass_correct'; 
  if (item_pass_length >= 6) { 
  //Если все совпало 
  if (document.getElementById(item).value == item_pass_value) { 
    document.getElementById(item_correct).innerHTML = '<img src="/пути к картинке ОКЕЙ">'; 
    document.getElementById('check_repass').value = 1; 
  } 
  //Если не совпало 
  else if (document.getElementById(item).value.length >= 6) { 
    document.getElementById(item_correct).innerHTML = '<img src="/пути к картинке НЕ ОКЕЙ">'; 
    .getElementById('check_repass').value = 0; 
  } 
} 
checkAll(); 
} </script>

Должно получиться примерно так

И не большая фенька: замена первой буквы на заглавную в полях имя и фамилия, если пользователь набрал все с маленькой

Поле, примерно в 136-ой строчке:

<input
size="30"
type="text"
name="REGISTER[<?=$FIELD?>]"
value="<?=$arResult["VALUES"][$FIELD]?>" />

Меняем на


<script type="text/javascript"> 
  function name_up() 
    { 
    if(document.getElementById("REGISTER[NAME]").value.length==1) document.getElementById("REGISTER[NAME]").value=document.getElementById("REGISTER[NAME]").value.toUpperCase(); 
    if(document.getElementById("REGISTER[LAST_NAME]").value.length==1) document.getElementById("REGISTER[LAST_NAME]").value=document.getElementById("REGISTER[LAST_NAME]").value.toUpperCase(); 
    } 
</script> 

<input
  size="30"
  ype="text"
  name="REGISTER[<?=$FIELD?>]"
  id="REGISTER[<?=$FIELD?>]"
  value="<?=$arResult["VALUES"][$FIELD]?>"
  onkeydown="return name_up();"/><
Guest 24.07.2015
Ну как бы запрос на регистрацию можно подменить запросом и ваш JS прикурит! Да и вообще клиентская валидация должна совпадать с серверной!
Михаил Базаров 25.07.2015
Цитата
Guest пишет:
Ну как бы запрос на регистрацию можно подменить запросом и ваш JS прикурит! Да и вообще клиентская валидация должна совпадать с серверной!
JS однозначно прикурит, но иногда, когда нужно просто реализовать функционал, при этом не сильно нагрузить сервер - проще поступить именно так. Хотя, конечно вы правы- все должно быть идеально- не всегда это нужно, чаще никогда

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 17499 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Подключение SSL на Битрикс виртуальная машина Просмотров: 11929 С первого января 2017 года, наличие безопасного соединения HTTPS становится практически об... Заполнить картинки разделов каталога из картинок товаров Просмотров: 338 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Memcached на сайте под управлением битрикс, при использовании Веб Окр... Просмотров: 6940 Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования ... Прятать или показывать описание раздела каталога Просмотров: 598 В новых компонентах и шаблонах catalog.section есть не документированный и не выводимый па... Менять большую картинку, при клике на маленькую, в детальной карточке Просмотров: 1764 Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании д... Отфильтровать новости в Битрикс за заданный период Просмотров: 15590 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Постраничная навигация в списке разделов Битрикс- catalog.section.lis... Просмотров: 8719 Если в магазине очень много разделов и хочется вывести их с постраничной навигацией: можно... Смена вида карточек товаров в catalog.section с иммитацией AJAX Просмотров: 818 Смену вида карточек товаров, в разделе каталога, можно реализовать с помощью сессии, запис... Ajax форма обратной связи, реализация в битрикс Просмотров: 7580 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Очистка корзины в 1С-Битрикс одним нажатием Просмотров: 27754 В стандартной корзине Битрикс не хватает кнопки для полной очистки корзины одним нажатием... Создание мобильного приложения на cordova, для любого сайта. Просмотров: 14192 Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данно... Ссылка и название раздела в списке новостей Битрикс Просмотров: 10517 Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новос... Изменить размер картинок на лету в битрикс Просмотров: 46794 Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздел... Определить местоположение пользователя и показать на карте Просмотров: 3270 Задача определить местоположение текущего пользователя и показать его на карте, с меткой. ... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 11554 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... Получить множественное пользовательское поле раздела. Значения множес... Просмотров: 357 Задача: У разделов инфоблока есть множественное поле типа список. Зная ID раздела, нужно п... Умный фильтр на главной странице Битрикс Просмотров: 20882 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 11425 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Вывод даты создания элемента в правильном формате в Битрикс Просмотров: 21668 Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого ...