我正在嘗試驗證多個電子郵件地址,但似乎無法正常作業。我是 Javascript 的新手,我在互聯網上搜索了解決方案,但無濟于事。
我可以列印電子郵件地址,但在驗證中它總是回傳 false 我做錯了什么?
這個想法是,當用戶想要洗掉地址時,他們可以將電子郵件地址添加到洗掉按鈕。我正在嘗試在按下提交按鈕時驗證電子郵件。
if 陳述句在 for 回圈內外不起作用
我擁有的:
function checkEmail() {
// Get all nodes with querySelectorAll
var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
// Log values
elements.forEach(element => console.log(element.innerText));
for (let index = 0; index < elements.length; index) {
const email = elements[index];
validEmail(email);
}
if (!validEmail()){
console.log("email klopt niet");
return false;
}else{
return true;
}
}
function validEmail(email) {
var 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,}))$/;
return re.test(email);
};
<ul id="ul-emaillist">
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
</ul>
<button onclick="checkEmail()">Validate</button>
uj5u.com熱心網友回復:
// Validate if all emails in the list are valid
function checkEmails() {
const elements = document.getElementById('ul-emaillist').getElementsByTagName('p');
let isValidEmails = true;
elements.forEach(element => {
const email = element.innerText;
// will result in false if at least one email is invalid
isValidEmails = isValidEmails && validEmail(email);
});
return isValidEmails;
}
uj5u.com熱心網友回復:
您需要將 的輸出設定validEmail(email)為一個變數,并在線上檢查if(!validEmail()),如下所示:
function checkEmail() {
// Get all nodes with querySelectorAll
var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
elements = [ ...elements ]
// Log values
// elements.forEach(element => console.log(element.innerText));
let valid = false;
let notvalid = false;
for (let index = 0; index < elements.length; index ) {
const email = elements[index].innerHTML;
if (validEmail(email)) {
valid = true;
}
if (!valid) {
console.log("bad email: " email);
notvalid = true;
} else {
console.log("good email: " email);
valid = true;
}
}
// use `valid` to check if ANY email is good
// use `notvalid` to check if ALL email's are good
if (valid) {
return true;
}
return false;
}
function validEmail(email) {
var 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,}))$/;
return re.test(email);
};
<ul id="ul-emaillist">
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
</ul>
<button onclick="checkEmail()">Validate</button>
uj5u.com熱心網友回復:
使用querySelectorAll選擇所有li元素,那么你就可以遍歷并檢索內部電子郵件文本p元素。像這樣:
function checkEmail() {
const elements = document.querySelectorAll("li.delete");
elements.forEach((element) => {
const email = element.querySelector("p").textContent;
if (isValidEmail(email)) {
alert(`${email} VALID`)
} else {
alert(`${email} INVALID`)
}
})
}
function isValidEmail(email) {
var 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,}))$/;
return re.test(email);
};
<ul id="ul-emaillist">
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
<li class="delete">
<p>testperson2.com</p><button class="delete">delete</button>
</li>
</ul>
<button onclick="checkEmail()">Validate</button>
uj5u.com熱心網友回復:
代碼幾乎作業,但你忘了添加innerText在elements[index]
function checkEmail() {
// Get all nodes with querySelectorAll
var elements = document.getElementById("ul-emaillist").getElementsByTagName("p");
// Log values
for (let index = 0; index < elements.length; index) {
const email = elements[index].innerText;
validEmail(email);
}
if (!validEmail()){
console.log("email klopt niet");
return false;
}else{
return true;
}
}
function validEmail(email) {
var 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,}))$/;
return re.test(email);
};
<ul id="ul-emaillist">
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
<li class="delete">
<p>[email protected]</p><button class="delete">delete</button>
</li>
</ul>
<button onclick="checkEmail()">Validate</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/348219.html
標籤:javascript html 正则表达式
