使用 Javascript 验证多个输入类型 =“电子邮件”

Question

我有一个包含多个电子邮件字段的表单，因此此电子邮件要提交到数据库中，但在此之前它应该验证以避免重复，（通过单击表单中存在的添加更多按钮生成多个电子邮件字段）。

我编写了 ValidateEmail 脚本以避免重复，但是它仅适用于一个电子邮件字段，但不适用于多个电子邮件字段。

问题： 1）如果我们在第一个字段中输入电子邮件 ID，它将进行验证并检查电子邮件是否存在，如果存在则禁用提交按钮，如果不存在则启用按钮。

2) 如果我们在第二个字段中键入电子邮件 ID，并且在验证后返回电子邮件不存在，那么它将启用提交按钮，但是在第一个电子邮件字段中包含重复的电子邮件。

3) 如果所有电子邮件字段不包含重复值，则仅启用提交按钮，否则应保持禁用状态..

<form>
<div>
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />   // initially single filed

// This additional email fields created when click on add more button 

<input type="email" name="email[]" class="email" onblur="validate_email(this)" /> 
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />
</div>

<button class="add_more">Add more</button>   // this will append extra email fileds
</form>

<script>
// This is the script it will check whether email already exist or not
function ValidateEmail(data) {
        var email_id = data.value;
        $.ajax({
            type: "POST",
            url: "<?= base_url('controller') ?>",
            data:{
               email_id:email_id 
            },
            dataType: 'json',
            success: function (response) {
                if(response.exist){
                       // disable submit button and show error

                    }
                     else{
                      //enable submit field and hide error

                        }
            },
            error: function (jqXHR, textStatus, errorMessage) {
                console.log(errorMessage); // Optional
            }
        });
    }

</script>

Answer 1

如果您为此使用 jQuery，您可以使用事件委托来动态插入/删除元素。截至目前，这些将是电子邮件输入。

基本上这里的想法是：

• 获取最后更改/onblur 输入元素的值。
• 在服务器端验证现有电子邮件（异步检查）
• 扫描当前可用的电子邮件输入，然后验证每个值并将其与步骤 (1) 中的当前电子邮件匹配。
• 如果找到，请将 error 类添加到现有电子邮件字段
• 否则，将valid 类添加到现有电子邮件字段

你不需要传递onblur="validate_email(this)"，这可以在jquery中完成。

const data = [
  'allan@user.com',
  'john@user.com',
  'ronaldo@user.com',
  'sony@user.com',
  'victor@user.com',
  'matt@user.com',
]

function isEmail(email) {
  // eslint-disable-next-line no-useless-escape
  return RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i).test(email);
};

function asyncEmailValidate(email) {
  return new Promise(function(resolve, reject) {
    if (data.includes(email))
       return reject('Found duplicated')
    
    return resolve(true);
  })
}

$(document).ready(function() {
  $(document)
    .on('blur',"input.email", function(e) {
      // Current email input
      var currentEmail = e.target.value,
          $emailNode = $(this),
          isValid = true;
    
      // Validate email
      if (!isEmail(currentEmail))
        return;
    
      // Validate email on server side first,
      // If found no existing email, then check 
      // siblings email for duplicates
      var serverResult = asyncEmailValidate(currentEmail);
      
      serverResult
        .then(function(result) {
          // There's no existing email with the inputed email. Now
          // look up on other available email inputs fields, except
          // the current one, and validate with the current email value
          var siblingsEmailInputs = $("input.email").not($emailNode);

          if (!siblingsEmailInputs)
            return;

          if (siblingsEmailInputs.length > 0) {
            siblingsEmailInputs.each(function(index) {
              console.log('input : ', $(this).val())
              
              if ($(this).val() !== "" && $(this).val() === currentEmail) {
                 isValid = false;
              }
            });
          }
          
          // Finally update the state for the current field
          if (isValid) {
            $emailNode.addClass('is-valid');
          } else $emailNode.addClass('is-error');
        })
        .catch(function(error) {
          $emailNode.addClass('is-error');
          console.log('error:', error);
        })
    });
  
})

.email.is-error {
   border: 1px solid red;
}

.email.is-valid {
  border: 1px solid green;
}

.email {
  width: 300px;
  margin: 5px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
const data = [
  'allan@user.com',
  'john@user.com',
  'ronaldo@user.com',
  'sony@user.com',
  'victor@user.com',
  'matt@user.com',
]
</pre>

<div>
<input type="email" name="email[]" class="email" /> 
</div>
  <div>
    <input type="email" name="email[]" class="email" /> 
</div>
    <div> 
      <input type="email" name="email[]" class="email" />
</div>
<div>
<input type="email" name="email[]" class="email" />
</div>

这些只是您处理电子邮件验证和重复电子邮件的基本方法。我认为您可以从这里开始处理您的提交逻辑。

一个简短的说明，你应该把ajax提交过程放在一个单独的函数中，不要和验证过程混在一起，这样会更清楚。

希望有帮助

链接工作示例：https://codepen.io/DieByMacro/pen/jOOdWMr

更新： - 我有一段时间没有使用 ajax 和 jQuery，所以我不确定正确的语法，所以我用 Promised 调用替换了它，它与你发出异步请求的工作方式相同。您可以关注更新后的版本以供参考。