javascript - 在 JavaScript 中传递给多个条件的值

Question

我有一个输入字段，我正在其中检查这两个条件...

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 并且我收到错误:

未捕获类型错误:无法读取未定义的属性“toLowerCase”

不知道为什么会发生这种情况，正如我检查的那样:

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

并获取字符串？!但错误提示未定义？

Answer 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.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>