我的代码有一个小问题,无法提交表单。一旦我填写了表格并按下提交按钮,什么也没有发生,看起来表格没有被提交。实际上,此代码应检查是否有任何空字段,如果有,则提示一条消息,指示填写字段。如果每个字段都填写完毕,请提交表单。
function storeUser() {
var userObject = {};
userObject.username = document.getElementById("username").value;
userObject.email = document.getElementById("inputEmail").value;
userObject.password = document.getElementById("inputPassword").value;
userObject.passwordConfirm = document.getElementById("inputPasswordConfirm").value;
userObject.mobileNumber = document.getElementById("inputNumber").value;
userObject.score = 0;
if (userObject.password !== userObject.passwordConfirm) {
document.getElementById("Warning").innerHTML = "Your password doesn't match.";
return false;
}
if (userObject.username === "") {
document.getElementById("Warning").innerHTML = "";
document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
}
if (userObject.email === " " ) {
document.getElementById("Warning").innerHTML = "";
document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
}
if (userObject.password === " ") {
document.getElementById("Warning").innerHTML = "";
document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
}
if (userObject.passwordConfirm === " ") {
document.getElementById("Warning").innerHTML = "";
document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
}
if (userObject.mobileNumber === " ") {
document.getElementById("Warning").innerHTML = "";
document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
return false;
}
else {
return true;
}
localStorage[userObject.email] = JSON.stringify(userObject);
document.getElementById("Result").innerHTML = "Success! You have registered your account.";
正如您可能注意到的那样,我对此完全是新手。 Aynone 可以引导我走正确的路吗?
编辑:
<form class="form-container" name="registerForm" onsubmit="return false">
<p><b>Please fill out all fields to register your account</b></p>
<div class="form-group">
<input type="text" class="form-control" id="username" aria-describedby="username" placeholder="Username" minlength=3 required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPasswordConfirm" placeholder="Confirm password" required>
</div>
<div class="form-group">
<input type="tel" class="form-control" id="inputNumber" placeholder="Mobile number" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" required>
</div>
<button type="submit" onclick="storeUser()" class="btn btn-primary regstrbtn">Register</button>
<p id="Result"></p>
<p id="Warning" style="color: red;"></p>
</form>
最佳答案
查看您的代码我发现了一些问题:
无效的电话号码正则表达式:您正在使用以下正则表达式来验证电话号码字段,但它缺少字符:
^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$ // missing ] after 0-9 ^^
(我将忽略正则表达式具有占位符“手机号码”这一事实,但仅接受英国伦敦内外的固定电话号码。)
如果电子邮件、密码、确认密码和电话号码字段包含单个空格,您将显示验证错误消息:
if (userObject.email === " " ) {
您可能希望将这些值与空字符串进行比较:
if (userObject.email === "" ) {
storeUser()
函数的结尾如下:if (userObject.mobileNumber === " ") { document.getElementById("Warning").innerHTML = ""; document.getElementById("Warning").innerHTML = "Please fill out the form fully!"; return false; } else { return true; } localStorage[userObject.email] = JSON.stringify(userObject); document.getElementById("Result").innerHTML = "Success! You have registered your account.";
我们什么时候到达最后两行,即写入本地存储的行和显示成功消息的行?
- 如果电话号码字段包含单个空格,则会出现警告消息,并且函数返回
false
。 - 如果电话号码字段包含除单个空格之外的任何内容,该函数将返回
true
。
最后两行无法访问。它们永远不会被执行,因为函数在到达它们之前就返回了。
您可能想要做的是去掉
else
子句并在底部添加return true;
,即:if (userObject.mobileNumber === " ") { document.getElementById("Warning").innerHTML = ""; document.getElementById("Warning").innerHTML = "Please fill out the form fully!"; return false; } localStorage[userObject.email] = JSON.stringify(userObject); document.getElementById("Result").innerHTML = "Success! You have registered your account."; return true;
- 如果电话号码字段包含单个空格,则会出现警告消息,并且函数返回
return false;
的使用不一致。如果密码不匹配,或者电话号码字段未填写,该函数将返回false
。用户名、电子邮件、密码和确认密码字段没有相应的return false;
行。为每个字段添加此行。如果表单成功填写,您不会清除警告消息。添加行
document.getElementById("Warning").innerHTML = "";
到函数结束。
顺便说一下,你有不同的线对
document.getElementById("Warning").innerHTML = ""; document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
但是每对中的第一行是不必要的,因为分配给警告元素内部 HTML 的空字符串值会立即被第二行中分配的警告消息替换。您可以删除每个此类对的第一行。
关于JavaScript 无法提交带有空字段验证的表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59230051/