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

时间:2015-04-01 19:34:16

标签: javascript jquery arrays

如果用户未在字段中键入@符号,则假设使用.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; }
    });

});

2 个答案:

答案 0 :(得分:2)

问题在于如果有条件:if ($.inArray(emailaddressVal,invalidEmailAddresses) > 0)

由于$.inArray()方法返回找到的字符串的索引,当返回值0时,实际上找到它 - 但是在字符串的开头(位置0,因为JS是从零开始)。所以,you should use !== -1 instead,即:if ($.inArray(emailaddressVal,invalidEmailAddresses) !== -1)

但是,这并不能完全解决您的问题 - $.inArray()仅比较字符串,它不会搜索它。因此,如果您的字符串包含列入黑名单的电子邮件域,但不完全匹配,则返回false。在这种情况下,您应该使用正则表达式。策略很简单:使用.each()循环遍历数组,并获取值,使用它构造一个表达式,我们将测试您提供的电子邮件地址。

此外,由于用户输入的电子邮件地址可能无法通过两项测试,因此会显示两个<div>个相同的ID。这是无效的HTML。相反,请尝试使用类。

p / s:我还建议改为将.blur()改为.change()。它更健壮:)


考虑到上述所有要点后,我对您的代码进行了一些重构:

  • 声明一个名为hasError的全局(但仍在函数范围内)错误数组。它将用于存储您获得的所有错误消息,因为我们无法确定是否会出现一个或多个错误。
  • 我们构建了两个测试:
    1. 使用string.search(regexp)方法测试电子邮件是否与黑名单匹配。如果匹配,则返回的值将超过-1。然后,我们将相关的错误消息推送到对象中的hasError
    2. 要测试电子邮件是否包含@符号,我们会使用您的默认逻辑(效果很好)。如果出现错误,我们会再次将相关错误消息推送到对象中的hasError
  • 最后,我们评估hasError。如果它不是空的,那么我们知道某处有错误,并循环通过它。可以通过messages关键字:)
  • 访问错误消息

不用多说,这是你的代码:

$(document).ready(function() {

  $("input[name='emailAddress']").change(function() {

    // Actual Email Validation function
    var hasError = [],
        emailaddressVal = $("input[name='emailAddress']").val(),
        invalidEmailAddresses = ['godaddy.com', 'aol.com', 'yahoo.com', 'yahoo.fr'];

    // Check against blacklist
    $.each(invalidEmailAddresses, function(i, v) {
      var pattern = new RegExp(v, 'i');
      if (emailaddressVal.search(pattern) > -1) {
        hasError.push({
          'test': 'blacklist',
          'message': 'The email provided is not from a business related domain. Please use an appropriate email address instead.'
        });
      }
    });

    // Check if there is an '@' character
    if ($("input[name='emailAddress']").val().indexOf('@') === -1) {
      hasError.push({
        'test': '@ sign',
        'message': 'The email provided does not contain an @ symbol'
      });
    }

    console.log(hasError);
    // Error handling
    $('#error').remove();
    if(hasError.length > 0) {
      var $error = $('<div id="error"><ul></ul></div>');
      $.each(hasError, function(i,v) {
        $error.find('ul').append('<li>'+v.message+'</li>');
      });
      $error.insertAfter("input[name='emailAddress']");
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="emailAddress" type="email" />
</form>

答案 1 :(得分:2)

如果您添加以下代码

,则此功能正常

&#13;
&#13;
    $(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);
  }

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="emailAddress" />
&#13;
&#13;
&#13;