使用 Javascript 验证多个输入类型="email"

Question

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

我已经编写了 ValidateEmail 脚本来避免重复，但是它只能用于一个电子邮件字段，但不能成功用于多个电子邮件字段。

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

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

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，则可以对动态 inserted/removed 元素使用事件委托。截至目前，这些将是电子邮件输入。

基本上这里的想法是：

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

你不需要通过 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 提交过程放在一个单独的函数中，不要与验证过程混淆，这样会更清楚。

希望对您有所帮助

Link 工作样本：https://codepen.io/DieByMacro/pen/jOOdWMr

更新： - 我已经有一段时间没有将 ajax 与 jQuery 一起使用了，所以我不确定语法是否正确，所以我将其替换为 Promised 调用，它的工作方式与您进行异步操作相同要求。您可以关注更新后的版本供您参考。

使用 Javascript 验证多个输入类型="email"

Validate multiple input type="email" using Javascript

javascript

jquery

email-validation