Передача значений нескольким условным операторам в JavaScript

У меня есть поле ввода, где я проверяю эти два условия...

  1. Если поле ввода является допустимым форматом электронной почты
  2. Если поле ввода заканчивается доменом специфический

    $('#newsletter_submit').on('click', function () {
    
      document.getElementById('newsletter_text').removeAttribute('required')
      var $emailFieldValue = $('#newsletter_text').val();
      var $splitEmailFieldValue = $emailFieldValue.split('@');
      var $result = $('#result')
    
    
      function isValidEmailAddress(emailAddress) {
        var pattern = /^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
        return pattern.test(emailAddress);
      }
    
      if (!isValidEmailAddress($emailFieldValue)) {
         $result.animate({ 'opacity': 0 }, 0, function () {
          $(this).text('Must be a valid email format').css('color', 'red');
        }).animate({ 'opacity': 1 }, 500);
        var obj = {}
        obj['$emailFieldValue'] = $emailFieldValue
        console.info('obj.$emailFieldValue', typeof obj.$emailFieldValue)
      if (($splitEmailFieldValue[1].toLowerCase()) !== 'acme.com')) {
          $result.animate({ 'opacity': 0 }, 0, function () {
          $(this).text('Only Acme employees can register i.e. [email protected]').css('color', 'red');
        }).animate({ 'opacity': 1 }, 500);
      }
      } else {
        $result.animate({ 'opacity': 0 }, 0, function () {
          $(this).text('Thanks for registering').css('color', 'green');
        }).animate({ 'opacity': 1 }, 500);
      }
    })
    

В настоящее время он просто игнорирует специфическое для домена условное выражение и позволяет ввести [email protected], и я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Не уверен, почему это происходит, поскольку я проверил:

 var obj = {}
     obj['$emailFieldValue'] = $emailFieldValue
     console.info('obj.$emailFieldValue', typeof obj.$emailFieldValue)

И получить строку?! Но ошибка говорит undefined?

Что такое console.info $splitEmailFieldValue?

Taplar 26.04.2019 18:39

@Taplar Спасибо за ответ... Строка!

Antonio Pavicevac-Ortiz 26.04.2019 18:39

Нет, это массив. Поэтому при регистрации он должен печатать массив в консоли. Какова его ценность? Предположительно, он должен печатать на консоли ['clark.kent', 'dailyplanet.com']

Taplar 26.04.2019 18:40

Также в качестве примечания; с точки зрения безопасности ограничение доменов электронной почты должно выполняться на стороне сервера, а не на стороне клиента. Или не только на стороне клиента. Есть простые способы обойти вашу логику.

Taplar 26.04.2019 18:45

@Taplar Ой, извините, я неправильно это понял...

Antonio Pavicevac-Ortiz 26.04.2019 18:47

@Taplar Спасибо за эту рекомендацию. Это потому, что пользователям будет сложно заниматься злонамеренной деятельностью?

Antonio Pavicevac-Ortiz 26.04.2019 19:05

Пользователи не могут вмешиваться в работу вашего сервера кода. Они могут легко перехватывать/изменять запросы, сделанные из браузера, до того, как они достигнут вашего сервера.

Taplar 26.04.2019 19:07

@Taplar Спасибо! Я полагаю через само поле ввода?

Antonio Pavicevac-Ortiz 26.04.2019 19:10

Пользователю вообще не нужно вмешиваться в поле. Как я уже сказал, они могут сами перехватывать/изменять запросы. Либо путем воспроизведения запросов от инструментов разработчика, либо существуют плагины для браузера, которые позволяют разработчикам вмешиваться в запросы.

Taplar 26.04.2019 19:14

@Taplar Спасибо за 411. Я слежу за этим!

Antonio Pavicevac-Ortiz 26.04.2019 20:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
10
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я рекомендую разделить валидацию и позже сделать валидацию, посмотреть.

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
  }
  
function isValidDomainAddress(emailAddress) {
  return emailAddress.toLowerCase() === 'acme.com';
}

$('#newsletter_submit').on('click', function () {
  document.getElementById('newsletter_text').removeAttribute('required')
  var $emailFieldValue = $('#newsletter_text').val();
  var $splitEmailFieldValue = $emailFieldValue.split('@');
  var $result = $('#result');
  var isValid = isValidEmailAddress($emailFieldValue);
  if (!isValid) {
     $result.animate({ 'opacity': 0 }, 0, function () {
      $($result).text('Must be a valid email format').css('color', 'red');
    }).animate({ 'opacity': 1 }, 500);
  }
   var obj = {}
    obj['$emailFieldValue'] = $emailFieldValue
    console.info('obj.$emailFieldValue', typeof obj.$emailFieldValue);
  var isValidDomain = isValid? isValidDomainAddress($splitEmailFieldValue[1]): false;
  if (isValid && !isValidDomain) {
      $result.animate({ 'opacity': 0 }, 0, function () {
      $(this).text('Only Acme employees can register i.e. [email protected]').css('color', 'red');
    }).animate({ 'opacity': 1 }, 500);
  } 
  
  if (isValid && isValidDomain){
    $result.animate({ 'opacity': 0 }, 0, function () {
      $(this).text('Thanks for registering').css('color', 'green');
    }).animate({ 'opacity': 1 }, 500);
  }
    
});

   
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "newsletter_text" required/>
<div id = "result"></div>
<br/>
<button id = "newsletter_submit" type = "button">Submit</button>

Спасибо Хуан! Это то, что я хотел!

Antonio Pavicevac-Ortiz 26.04.2019 19:08

Другие вопросы по теме