Question

道歉，如果这是完全明显的，但我对Javascript＆amp;我不是一个编码高手。我想使用一个提交按钮验证两个非常简单的表单，但我不完全确定如何去做。任何指针都很可爱！到目前为止，这是我的代码

function checkName() {
    var x = document.forms["Name"]["fname"].value;
    if (x == null || x == "") {
        alert("First name must be filled out");
        return false;
    }
}

function checkEmail() {
    var x = document.forms["Mail"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

<style type="text/css">
</style>
<link rel="stylesheet" href="teststyle.css" type="text/css">
</head>
<body>
<form name="Name" action="MyForm.html" onsubmit="return checkName()"
method="post">
First name: <input name="fname" type="text"> <br>
<br>
Email: <input name="Mail" type="text">
</form>
<br>
<input value="Submit" type="submit"><br>
<br>
</body>

Answer 1

验证两个表单并不是很有用，因为您一次只能提交一个表单。你似乎对表格和字段的概念有点混淆。您想要一次性提交的所有内容都应该是一个表单中的单独字段。例如，在评论框中，单个<input>中的“姓名”，“电子邮件”和“评论”字段为<form>个。您的代码应该如下所示：

function checkName() {
    var x = document.forms["Newsletter"]["fname"].value;
    if (x == null || x == "") {
        alert("First name must be filled out");
        return false;
    }
}

function checkEmail() {
    var x = document.forms["Newsletter"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

和

<body>
  <form name="Newsletter" action="MyForm.html" onsubmit="return checkName() && checkEmail()">
    First name: <input name="fname" type="text"> <br>
    <br>
    Email: <input name="email" type="text">
    <br>
    <input value="Submit" type="submit"><br>
  </form>
</body>

或者您可能希望将它们组合成一个函数

<form name="Newsletter" action="MyForm.html" onsubmit="return formIsValid()" method="post">

其中formIsValid看起来像

function formIsValid()
{
  return checkName() &&
         checkEmail();
}

或更详细的

function formIsValid()
{
  if (!checkName())
    return false; // name invalid

  if (!checkEmail())
    return false; // mail invalid

  // All validations passed
  return true;
}

此外，请务必将提交按钮放在表单中，即在结束</form>标记之前。

使用一个提交按钮验证两个字段

1 个答案: