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

Question

我有一个包含多个 email 字段的表单，所以这个 email 要提交到数据库中，但在此之前它应该验证以避免重复，（多个 email 是通过单击生成的更多表单字段）。

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

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

2) if we type type email id in second field and after validation it return email not exist then it will enable submit button however in first email field contain duplicate email.

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

<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，您可以使用事件委托来动态插入/删除元素。 截至目前，这些将是 email 输入。

基本上这里的想法是：

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

您不需要传递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>

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

快速说明，您应该将 ajax 提交过程留在单独的 function 中，不要与验证过程混淆，这样会更清楚。

希望这有帮助

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

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