我想使用這樣的 Javascript 函式正確檢查輸入的電子郵件地址：
function validation() {
let form = document.getElementById('form')
let email = document.getElementById('email').value
let text = document.getElementById('text')
let pattern = "/^(([^<>()[\\]\\\\.,;:\\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 (email.match(pattern)) {
form.classList.add('valid')
form.classList.remove('invalid')
text.innerHTML = "Valid"
text.style.color = '#00ff00'
} else {
form.classList.remove('valid')
form.classList.add('invalid')
text.innerHTML = "Not valid"
text.style.color = '#ff0000'
}
if (email == '') {
form.classList.remove('valid')
form.classList.remove('invalid')
text.innerHTML = ""
text.style.color = '#00ff00'
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()">
<span id="text"></span>
</div>
</form>現在，如果用戶輸入了未經驗證的電子郵件地址，它會validation()正確呼叫該函式并顯示Not Valid訊息。
但是問題來自當用戶嘗試更正他的電子郵件地址并輸入有效的電子郵件時，但由于最后一個電子郵件地址，訊息Not Valid仍然出現在頁面上。
那么當用戶第二次輸入有效電子郵件時，如何正確隱藏此訊息？
uj5u.com熱心網友回復：
試試這個代碼，
let pattern = /^(([^<>()[\]\.,;:\s@\"] (\.[^<>()[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()[\]\.,;:\s@\"] \.) [^<>()[\]\.,;:\s@\"]{2,})$/i;
// true if okay otherwise false.
pattern.test(email);
謝謝。
uj5u.com熱心網友回復：
如果您正在尋找標準的電子郵件驗證，那么仍然會出現message not valid ，因為根據您的模式它是無效的。在不同的問題中查看更多電子郵件常規模式。
function validation() {
let email = document.getElementById('email').value
let yourPattern = "/^(([^<>()[\\]\\\\.,;:\\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,}))$/"
let anotherPattern = /\S @\S \.\S /;
console.log("is yourPattern valid?", !!email.match(yourPattern));
console.log("is anotherPattern valid?", !!email.match(anotherPattern));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()">
</form>uj5u.com熱心網友回復：
也許使用 HTML5<input type="email" required>進行驗證。如果你需要在 JS 中做任何進一步的測驗，你可以，但這是一種更好的方法，并且你會得到內置的訊息。
然而，關于驗證的進一步說明。
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
function handleSubmit(e) {
e.preventDefault();
const data = new FormData(form);
console.log(data.get('email'));
}input[type="email"]:not(:placeholder-shown):invalid { border-color: red; }<form>
<input name="email" placeholder="Add an email" type="email" required>
<button type="submit">Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489729.html
標籤：javascript jQuery 验证 onkeydown
上一篇：如果在Reactjs中重復發送服務器請求，我該如何延遲服務器請求？
下一篇：未提供打字稿引數