我正在学习 CodeAcademy 上的类(class)，并尝试创建一个简单的 HTML 表单，用 JS 验证输入字段。这是我兄弟的生意的一个宠物项目的开始(他需要完全重建他的网站)。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Email Form</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="email-form" action="#">
<input type='text' name="firstname" value="First Name" onsubmit="return validateForm();"><br>
<input type='text' name='email' value="Email"><br>
<input type='submit' name='submit' value='Get AMPed!'>
</form>
</body>
</html>
JS脚本:
function validateForm() {
var fName = document.email-form.firstname.value;
if (fName == null || fName == "") {
alert("Please provide your first name!");
fName.firstname.focus();
return false;
}
var fEmail = document.email-form.email.value;
var atPos = fEmail.indexOf("@");
var dotPos = fEMail.lastIndexOf(".");
if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= fEmail.length) {
alert("Please enter a valid e-mail address");
return false;
}
}
我尝试过“return validateForm();”通过在“提交”按钮上使用 onclick= 但这也不起作用。
对于真正想以正确的方式学习的人来说，任何帮助都会非常有用。
最佳答案
这段代码有一些问题。它背后的想法是正确的，尽管您的函数会抛出一些错误，这会导致函数中断，这意味着它不会返回任何内容。
标识符不得包含字符“-”(减号)。它保留用于减法。您不能在标识符中使用它。表达式 document.email-form.firstname.value 被解释为计算。它尝试从 document.email 中减去 form.firstname.value。这两者都不存在，从而导致 ReferenceError。
使用下划线代替减号字符，您可以在标识符中安全地使用下划线。将表单名称从 email-form 更改为 email_form。
fName.firstname.focus() 不存在。 fName 是一个字符串(文本输入的内容)。您真正想要做的是 document.email_form.firstname.focus()。
您的函数应该始终返回一个值。因此，您应该在函数的最后返回 true。这不是必需的，但它有助于提高代码的可读性。
修复所有这些问题后，您可以在按钮上使用 onClick="return validateForm()" 或在按钮上使用 onSubmit="return validateForm()"表格。
关于javascript - JS 表单验证没有结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20869768/