Question

第二次编辑：OH我的上帝我是个傻瓜！我专注于javascript并完全忽略了html中缺少“结果”项目...感谢那些帮助过的人！

编辑：谢谢到目前为止。我纠正了人们指出的错误，但它仍然不喜欢我。 :(我的HTML在下面。

我正在关注html.net上的教程（关于Javascript的第16课），我已经准确地写了它应该如何编写。我甚至加载了工作教程页面的javascript文件并进行了比较（相同）...然后将其复制并粘贴到我的文件中以确保它仍然无法正常工作。如果有人能提出意见，那就太好了。代码如下：

<html>

  <head>
    <title>Lesson 16: form validation</title>
    <script type="text/javascript" src="lesson16.js"></script>
  </head>

  <body>
    <h1>Lesson 16: Form validation</h1>
    <form id="myForm" action="#" method="post">
    <fieldset>
      <p><label for="txtName">Name: </label>
         <input type="text" id="txtName" name="txtName" />
      </p>
      <p><label for="txtEmail">Email: </label>
         <input type="text" id="txtEmail" name="txtEmail" />
      </p>
      <p><input type="submit" value="Submit" /></p>
    </fieldset>
    </form>
  </body>

</html>

function init()
{
  var myForm = document.getElementById("myForm");
  myForm.onsubmit = validate;
}

onload = init;

function validate()
{
  var name = document.getElementById("txtName").value;
  var email = document.getElementById("txtEmail").value;
  var isRequiredNameSet = false;
  var isRequiredEmailSet = false;
  var isEmailValid = false;

  var message = "";
  isRequiredNameSet = validateRequired(name);
  isRequiredEmailSet = validateRequired(email);
  isEmailValid = validateEmail(email);

  if (isRequiredNameSet && isRequiredEmailSet && isEmailValid)
  {
    message = "Thank you, you know how to follow instructions...good for you.";
  }
  else if (! isRequiredNameSet)
  {
    message = "Please, enter a name. First thing and you got it wrong...";
    writeMessage(message);
    return false;
  }
  else if (! isRequiredEmailSet)
  {
    message = "Please, enter an email...come on, it's not that hard...";
    writeMessage(message);
    return false;
  }
  else if (! isEmailValid)
  {
    message = "A valid email, numb nuts...with an @ symbol and a .com or whatever...GODS!!";
    writeMessage(message);
    return false;
  }
  alert(message);
}

function validateRequired(input)
{
  var isValid = false;
  if (input.length == 0)
  {
    isValid = false;
  }
  else
  {
    isValid = true;
  }
  return isValid;
}

function validateEmail(email)
{
  var isValid = false;
  if (email.indexOf("@") == -1 || email.indexOf(".") == -1)
  {
    isValid = false;
  }
  else
  {
    isValid = true;
  }
  return isValid;
}

function writeMessage(text)
{
  var paragraph = document.getElementById("result");

  if (paragraph.firstChild)
  {
    paragraph.removeChild(paragraph.firstChild);
  }
  paragraph.appendChild(document.createTextNode(text));
}

Answer 1

问题是行myForm.onsubmit = validate(); ...在哪里调用validate函数而不是将它指定为对onsubmit的引用

myForm.onsubmit = validate;

同样适用于onload

onload = init;

如果isRequiredEmailSet

，则会出现问题

function validate() {
    var name = document.getElementById("txtName").value;
    var email = document.getElementById("txtEmail").value;
    var isRequiredNameSet = false;
    var isRequiredEmailSet = false;
    var isEmailValid = false;

    var message = "";
    isRequiredNameSet = validateRequired(name);
    isRequiredEmailSet = validateRequired(email);
    isEmailValid = validateEmail(email);

    if (isRequiredNameSet && isRequiredEmailSet && isEmailValid) {
        message = "Thank you, you know how to follow instructions...good for you.";
    } else if (!isRequiredNameSet) {
        message = "Please, enter a name. First thing and you got it wrong...";
        writeMessage(message);
        return false;
    } else if (!isRequiredEmailSet) {
        message = "Please, enter an email...come on, it's not that hard...";
        writeMessage(message);
        return false;
    } else if (!isEmailValid) {
        message = "A valid email, numb nuts...with an @ symbol and a .com or whatever...GODS!!";
        writeMessage(message);
        return false;
    }
    alert(message);
}

演示：Fiddle

Answer 2

IsRequiredNameSet（验证功能）中有else if，但它应为isRequiredNameSet。

注意：您可以将validateRequired() ...变为function validateRequired(input) { return !!input.length; }

表格验证并不像我

2 个答案: