gpt4 book ai didi

javascript - 电子邮件验证功能与表单按钮无法正常工作

转载 作者:行者123 更新时间:2023-12-02 23:18:47 25 4
gpt4 key购买 nike

我正在为我的 JS 类(class)做最后一个项目。我遇到了一些障碍,希望得到一些指导。我希望获取电子邮件的输入(所有编码都需要在 JS 中完成)并进行验证。如果电子邮件经过验证,那么它应该发送要在新网页上写入的输入。如果输入无效,则应发出警报,然后用户应重新输入正确的电子邮件地址。这只是该项目的一部分。我正在创建让用户输入输入信息以在新页面上写入简历。

根据代码的当前状态,它会弹出电子邮件无效的警告框(即使它是有效的)。如果我去掉验证部分,我就已经写好了。然而,它写的是“未定义”。

//html
<!DOCTYPE html>
<html lan= "en">
<head>
<title>WEB 115 Final Project</title>
</head>
<body>
<script src= "projectJS.js"></script>
<br><br>
<form onsubmit="validateEmail()">
<input type="submit" value="Create Resume">
</form>
</body>
</html>
//JS email
var email = document.createElement("p");
email.innerText = "Enter Email Address:";
document.body.appendChild(email);
var inputEmail = document.createElement("input");
inputEmail.type = "text";
inputEmail.setAttribute("id", "email");
document.body.appendChild(inputEmail);

//email validation on click form button from html
function validateEmail(inputEmail) {
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var testRe = re.test(inputEmail);
testRe;
if (testRe != true) {
window.alert("Invalid Email Address. Please Reenter");
}
else {
var openWindow = window.open("");
openWindow.document.write(inputEmail);
}
}

如果有人愿意就这个问题提供建议,我将不胜感激。谢谢。

最佳答案

问题很简单,当您实际想要测试的是 inputEmail.value 时,您将 inputEmail 作为参数传递给 test() >。下面的演示应该有效:

const validateEmail = (e, inputEmail) => {
e.preventDefault();
if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inputEmail.value)) {
console.log(`${inputEmail.value} is a VALID email address :)`);
return true;
}
console.log(`${inputEmail.value} is an INVALID e-mail address. Please fix!`);
return false;
};

const init = () => {
var email = document.createElement("p");
email.innerText = "Enter Email Address:";
document.body.appendChild(email);

var inputEmail = document.createElement("input");
inputEmail.type = "text";
inputEmail.setAttribute("id", "email");
document.body.appendChild(inputEmail);

document.querySelector('form').addEventListener('submit', e => validateEmail(e, inputEmail));
};


init();
<head>
<title>WEB 115 Final Project</title>
</head>

<body>
<script src="projectJS.js"></script>
<br><br>
<form>
<input type="submit" value="Create Resume">
</form>
</body>

关于javascript - 电子邮件验证功能与表单按钮无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57043127/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com