Question

我正在阅读CodeAcademy的课程，我正在尝试创建一个简单的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 =，但这也无效。

对于那些真正想要以正确的方式学习的人来说，任何帮助都会非常棒。

Answer 1

首先：document.email-form无法使用，您需要以这种方式使用它：document['email-form']。（因为-将导致算术计算）

尝试使用浏览器的调试工具，您会看到错误消息..

其次，在onsubmit="return validateForm();"代码中使用<form>，而不是<input>代码。

Answer 2

此代码存在一些问题。它背后的想法是正确的，虽然你的函数抛出了一些错误，导致函数中断，这意味着它不会返回任何东西。

标识符不得包含字符“ - ”（减号）。它保留用于减法。您不能在标识符中使用它。表达式document.email-form.firstname.value被解释为计算。它会尝试从form.firstname.value中减去document.email。这两个都不存在，导致 ReferenceError 。

使用下划线代替减号，您可以安全地在标识符中使用。将表单名称从email-form更改为email_form。

fName.firstname.focus()不存在。 fName是一个字符串（文本输入的内容）。你真正想做的是document.email_form.firstname.focus()。

您的函数应该始终返回一个值。因此，您最后应该return true。这不是必要的，但它有助于您的代码的可读性。

修好所有内容后，您可以使用按钮上的onClick="return validateForm()"或表单上的onSubmit="return validateForm()"。

JS表单验证不会产生任何结果

2 个答案: