在纯javascript的表单框下打印电子邮件验证的错误消息

Question

我正在用charCode测试电子邮件验证。我正在使用鼠标移动，鼠标向上或鼠标向下。因此，如果移动了鼠标，我将尝试在表单框下打印电子邮件错误验证消息。首先，我将代码存储在一个变量中，然后将其与一个正则表达式进行匹配。无法打印错误信息。

HTML:

<div>
<label>Press the key</label>
</div>
<input type="text" id="kp">
<span id="pr"></span> 
<span id="words"></span> <br />
<span id="err"></span>
<button type="button" onClick="pr();">Submit</button>

Javascript:

function pr() {
let k = document.getElementById("kp");
let singlet = k.value;

const emailpatt = /^[a-z0-9]+([_a-z0-9.-]+)*[a-z0-9]+@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/;

k.addEventListener("keyup", checkkey, false);

document.getElementById("words").innerHTML = "<br />" + singlet + " <br />";
let warnT;
let warnE = "Email should be in [e-mail] format.n";
const warnBox = document.getElementById("err");

k.addEventListener("mousemove", checkemail, false);
}
function checkkey(event) {
const charCode = event.charCode;
document.getElementById("pr").innerHTML = singlet;
singlet += singlet;
}   

function checkemail(event) {
if (!singlet.match(emailpatt)) {
document.getElementById("err").innerHTML = warnE;
event.preventDefault();
displayWarning(warnE, k, warnT, warnBox);
}
}

function displayWarning(msg, fitem, warningTimeout, warningBox) {
warningBox.innerHTML = msg;
if (document.body.contains(warningBox)) {
clearTimeout(warningTimeout);
} else {
// insert warningBox after firstn
fitem.parentNode.insertBefore(warningBox, fitem.nextSibling);
}
warningTimeout = setTimeout(() => {
warningBox.parentNode.removeChild(warningBox);
warningTimeout = -1;
}, 6000);
}

Answer 1

您的代码有多个问题，但这里是一个开始:当您在Firefox或Chrome中打开页面并按F12时，您将看到控制台弹出，其中将显示Javascript错误。在这种情况下，它说"singlet未定义"。这是因为当您在pr-函数中定义singlet时，它具有局部作用域并且不能从其他函数内部访问。您可以通过在全局作用域中定义singlet以及使用的许多其他变量来解决这个问题。您可以只删除function pr() {和相应的}，只要在HTML加载后执行此代码。

同样，您可以使用<input type="email">，然后浏览器将在提交表单时验证输入。