(编辑:代码已更新)
当我尝试使用 JavaScript 进行客户端验证时，我遇到了错误，用户是否已在 HTML 表单的注册部分中正确填写了表单。 HTML 和 JS 文件非常简单:
( Fiddle )
JavaScript 和 HTML:
function validateForm() {
var name = document.getElementById('username').value;
var email = document.getElementById('email').value;
if (name == null || name == "" || checkIfSpaceOnly(name) == false) {
return false;
}
else if (email == null || email == "" || validateEmail(email) == false){
return false;
}
else
return true;
}
//other methods used in validateForm:
function checkIfSpaceOnly(input) {
var re = /\S/;
return re.test(input);
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
window.onload = function()
{
var submitBtn = document.getElementById('submit');
submitBtn.addEventListener("click", validateForm);
}
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<div class = "body1">
<div class = "forms" id="forms">
<h2>Log in</h2>
<form name='loginform' action='login.php' method='POST'>
<input type='email' name='email' placeholder="Email" ><br>
<input type='password' name='password' placeholder="Password" ><br><br>
<input type='submit' value='Log in'><br><br>
</form>
<hr>
<br><h2>Register</h2>
<form onsubmit="" name="register" action="register.php" method="POST" onsubmit="return validateForm()">
<input type="text" name="username" class="form-control" placeholder="Username" id="username"><br>
<input type="email" name="email" class="form-control" placeholder="Email" id="email"/><br>
<input type="password" name="password" class="form-control" placeholder="Passwoord"><br>
<br>
<input type="submit" name="submit" id="submit" value="Create user">
</form>
</div>
</div>
<script type="text/javascript" src="javascript.js"></script>
</html>所以问题是，HTML 文件根本没有使用 JS 文件。该表单很乐意注册任何用户，无论他们是否满足 JavaScript 文件的 if 条件。
我检查了控制台，它显示(当用户注册后)“ReferenceError:validateForm 未定义”。
当然，除了检查文件目录是否正确之外，我还搜索并阅读了一般 HTML JS 表单验证错误、此处的 20 个“类似问题”以及特定的 ReferenceError。我已经更改了值、名称、移动了代码部分......但我似乎找不到问题并且不知道该怎么做，尽管感觉这只是代码中某处的一个简单错误。
最佳答案
您有 3 个问题
- 你的 fiddle 设置不正确；所有代码都包含在
onload中，这意味着您的validateForm方法无法从 HTML 标记访问 - 表单中有 2 个
onsubmit属性 - 第二个属性包含应包含的内容，但由于第一个属性而被忽略 - 您可以在标记和代码中分配事件处理程序。选择一个，坚持下去。
当您修复这 3 个问题后，它会按预期工作，并且如果出现任何问题(即从 validateForm 返回 false)，则不会提交表单
关于JavaScript 验证文件不起作用 : "ReferenceError: validateForm is not defined" (html linked)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37680043/