Передача значений в несколько условных выражений в JavaScript - PullRequest
Новая
       29

Передача значений в несколько условных выражений в JavaScript

0 голосов
/ 26 апреля 2019

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

  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.log('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. joe@acme.com').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);
  }
})

В настоящее время он просто игнорирует условное обозначение домена и позволяет ввести clark.kent@dailyplanet.com, и я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

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

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

И получить строку ?! Но ошибка говорит неопределенный?

1 Ответ

1 голос
/ 26 апреля 2019

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

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.log('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. joe@acme.com').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>
...