如何使用引导程序验证表单中的电子邮件

Question

所以我想验证提交的电子邮件是否有效。试图让它与引导程序一起工作，因为我必须使用它。

这是代码笔： https://codepen.io/yytimo/pen/ExWLbLd

<div class="col-md-4">
                   <div class="form-outline">
                     <input
                       type="text"
                       class="form-control"
                       id="validationCustomEmail"
                       value=""
                       required
                     />
                     <label for="validationCustomEmail" class="form-label">E-Mail</label>
                     <div class="valid-feedback">Looks good!</div>
                     <div class="invalid-feedback">Enter valid e-mail.</div>
                   </div>
</div>

Answer 1

使用一些 javascript 技巧找到了一个可行的解决方案。试试这个

(() => {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach((form) => {
      form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
var email = document.getElementById('validationCustomEmail');
  email.oninput = () => {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    if(!re.test(email.value)){
      email.setCustomValidity("Invalid field.");
      email.classList.add('is-invalid');
    } else {
      email.classList.remove('is-invalid'); 
      email.setCustomValidity("")
    }
  }
  }

)();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom01"
                      value="Mark"
                      required
                    />
                    <label for="validationCustom01" class="form-label">First name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-outline">
                    <input
                      type="text"
                      class="form-control"
                      id="validationCustom02"
                      value="Otto"
                      required
                    />
                    <label for="validationCustom02" class="form-label">Last name</label>
                    <div class="valid-feedback">Looks good!</div>
                  </div>
                </div>
                <div class="col-md-4">
                    <div class="form-outline">
                      <input
                        type="text"
                        class="form-control"
                        id="validationCustomEmail"
                        value=""
                        required
                      />
                      <label for="validationCustomEmail" class="form-label">E-Mail</label>
                      <div class="valid-feedback">Looks good!</div>
                      <div class="invalid-feedback">Enter valid e-mail.</div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom03" required />
                    <label for="validationCustom03" class="form-label">City</label>
                    <div class="invalid-feedback">Please provide a valid city.</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-outline">
                    <input type="text" class="form-control" id="validationCustom05" required />
                    <label for="validationCustom05" class="form-label">Zip</label>
                    <div class="invalid-feedback">Please provide a valid zip.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      value=""
                      id="invalidCheck"
                      required
                    />
                    <label class="form-check-label" for="invalidCheck">
                      Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">You must agree before submitting.</div>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
              </form>

Answer 2

使用type:email 输入可以帮助您。