JavaScript 验证未正确发生。表单仍然提交而不检查问题
我试过从
getElementByID.value;
和 document.form[][].value;
尝试更改我的 javascript 以在我的函数 init()
上执行此操作;
也在 HTML obsubmit 属性中。
我真的很困惑我做错了什么
function regValidate() {
var errMsg = document.getElementById("errMsg");
var username = document.getElementById("Username").value;
errMsg.style.padding = "10px";
var emailRE = "@";
var email = document.forms["register"]["email"].value;
if (email.match(emailRE) || email.length < 6) {
errMsg.innerHTML = "Please enter a valid email";
return false;
} else if (username.length < 5) {
errMsg.innerHTML = "Please enter a valid username";
}
}
<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
<p>
<h1 class="form--title">Register</h1>
</p>
<div id="errMsg"></div>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
</p>
<p>
<label for="username">User ID</label>
<input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
</p>
<p>
<input type="submit" value="submit" /><br>
<input type="reset" value="reset" />
</p>
没有错误消息,它直接进入表单页面,显示为什么名称属性提交的内容...
最佳答案
你不需要e.preventDefault()
,你只需要在所有验证失败时使用return false
。
getElementById("Username")
应该是 getElementById("username")
,因为 ID 区分大小写。
您的电子邮件正则表达式测试是倒退的,如果它不匹配您想要报告错误。
function regValidate() {
var errMsg = document.getElementById("errMsg");
var username = document.getElementById("username").value;
errMsg.style.padding = "10px";
var emailRE = "@";
var email = document.getElementById("email").value;
if (!email.match(emailRE) || email.length < 6) {
errMsg.innerHTML = "Please enter a valid email";
return false;
} else if (username.length < 5) {
errMsg.innerHTML = "Please enter a valid username";
return false;
}
}
<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
<p>
<h1 class="form--title">Register</h1>
</p>
<div id="errMsg"></div>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
</p>
<p>
<label for="username">User ID</label>
<input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
</p>
<p>
<input type="submit" value="submit" /><br>
<input type="reset" value="reset" />
</p>
</form>
关于javascript - HTML 表单和 JavaScript 验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58226879/