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

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输入可以帮助您。