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

Validating two fields with one submit button

本文关键字：验证 两个 字段 按钮 一个 提交      更新时间：2023-10-08

如果这是完全显而易见的，我很抱歉，但我对Javascript&我并不是一个编程高手。我想用一个提交按钮验证两个非常简单的表单，但我不完全确定如何进行。任何指针都会很好！这是我到目前为止的代码

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>
验证两个表单不是很有用，因为一次只能提交一个。你似乎有点混淆了形式和字段的概念。你想一次性提交的所有内容都应该是一个表单中的一个单独字段。例如，在评论框中，"姓名"、"电子邮件"answers"评论"字段将是单个<form>中的<input>。您的代码可能应该是这样的： 
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>标签之前。

相关文章：