时间戳

首页 > 解决方案 > 电子邮件验证功能无法与表单按钮一起正常工作

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

问题描述

我正在为我的 JS 课程做最后的项目。我遇到了一些障碍，希望得到一些指导。我希望将输入（所有编码都需要在 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);
    }
}

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

标签： javascripthtmlformsbuttonemail-validation

解决方案

问题只是您将inputEmail作为参数传递给test()您真正想要测试的时间是inputEmail.value. 下面的演示应该可以工作：

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>

推荐阅读