Question

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

如果输入字段是有效的电子邮件格式

如果输入字段以特定域结尾

$('#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)

得到字符串？！但是错误显示未定义？

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>

值传递给JavaScript中的多个条件

1 个答案: