javascript - 我想使用 JQuery 来验证使用 .inArray() 和 .val() 的表单

Question

如果用户没有在字段中输入 @ 符号，下面的脚本假设使用 .insertAfter() 插入一条消息。如果用户键入的值与 invalidEmailAddresses 数组中的值匹配，此脚本也会显示一条错误消息。

出于某种原因，仅执行此脚本的第二部分。如果用户输入 @ 符号，他们会收到一条消息，但如果用户输入类似于 test@yahoo.com 的地址，则不会显示消息。不确定我是否正确组织了代码。

$(document).ready(function(){

    $("input[name='emailAddress']").blur(function(){
        // Actual Email Validation function

            var hasError = false;
            var emailaddressVal = $("input[name='emailAddress']").val();
            var invalidEmailAddresses = 
            ['goddady.com', 'aol.com', 'yahoo.com', 'yahoo.fr'];     


            if ($.inArray(emailaddressVal,invalidEmailAddresses) > 0) {
                $( "<span id='emailMessage'>The email provided is not from a business related domain. Please use an appropriate email address instead.</span>" ).insertAfter( "input[name='emailAddress']" );
            } else {
                    $ ('#emailMessage').css('display','none');
                }

            if ($("input[name='emailAddress']").val().indexOf('@') > -1) { 
                   $ ('#emailMessage').css('display','none');     
        } 

        else {
                $( "<span id='emailMessage'>The email provided does not contain an @ symbol</span>" ).insertAfter( "input[name='emailAddress']" );
        } 
            if(hasError == true) { return false; }
    });

});

Answer 1

如果您添加以下代码，这将起作用

    $(document).ready(function() {

  $("input[name='emailAddress']").blur(function() {
    // Actual Email Validation function
    $('#emailMessage').html("");
    var hasError = false;
    var emailaddressVal = $("input[name='emailAddress']").val().trim();
    var invalidEmailAddresses = ['goddady.com', 'aol.com', 'yahoo.com', 'yahoo.fr'];

    if (!isValidEmailAddres(emailaddressVal)) {
      $("<span id='emailMessage'>The email provided does not contain an @ symbol</span>").insertAfter("input[name='emailAddress']");
      hasError = true;
    } else {
      debugger
      emailaddressVal = emailaddressVal.split('@').slice(1)[0].trim();

      if ($.inArray(emailaddressVal, invalidEmailAddresses) >= 0) {
        $("<span id='emailMessage'>The email provided is not from a business related domain. Please use an appropriate email address instead.</span>").insertAfter("input[name='emailAddress']");
      } else {
        $('#emailMessage').css('display', 'none');
      }
    }
    if (hasError == true) {
      return false;
    }
  });

  function isValidEmailAddres(emailID) {
    var regexExp = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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 regexExp.test(emailID);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="emailAddress" />