JavaScript 无响应验证

Question

我是 javascript 新手，我正在尝试创建一个简单的表单验证。当我点击提交按钮时，没有任何反应。我已经看了一段时间的例子，我似乎无法弄清楚我哪里出错了。任何建议：

在这篇文章之后，我将把它全部分解并从更小的开始。但与此同时，我认为另一双眼睛不会受伤，很可能我做错了什么。

HTML：

<form name="form" action="index.html" onsubmit="return construct();" method="post">
    <label>Your Name:<span class="req">*</span> </label>
    <input type="text" name="name"  /><br />
    <label>Company Name:<span class="req">*</span> </label>
    <input type="text" name="companyName" /><br />
    <label>Phone Number:</label> 
    <input type="text" name="phone" /><br />
    <label>Email Address:<span class="req">*</span></label> 
    <input type="text" name="email" /><br />
    <label>Best Time to be Contacted:</label> 
    <input type="text" name="TimeForContact" /><br />
    <label>Availability for Presenting:</label> 
    <input type="text"  name="aval" /><br />
    <label>Message:</label>
    <textarea name="message" ROWS="3" COLS="30"></textarea>
    <label>First Time Presenting for AGC?:<span class="req">*</span></label> 
    <input type="radio" name="firstTime" value="Yes" id="yes" /><span class="small">Yes</span>
    <input type="radio" name="firstTime" value="No" id="no"/><span class="small">No</span><br /><br />
    <input type="submit" name="submit" value="Sign-Up" />
</form> 

JavaScript：

function construct() {
    var name = document.forms["form"]["name"].value;
    var companyName = document.forms["form"]["companyName"].value;
    var email = document.forms["forms"]["email"].value;
    var phone = document.forms["forms"]["phone"].value;
    var TimeForC = document.forms["forms"]["TimeForContact"].value;
    var availability = document.forms["forms"]["aval"].value;

    if (validateExistence(name) == false || validateExistence(companyName) == false)
        return false;
    if (radioCheck == false)
        return false;
    if (phoneValidate(phone) == false)
        return false;
    if (checkValidForOthers(TimeForC) == false || checkValidForOthers(availability) == false)
        return false;
    if (emailCheck(email) == false)
        return false;
}
function validateExistence(name) {
    if (name == null || name == ' ')
        alert("You must enter a " + name + " to submit! Thank you."); return false;
    if (name.length > 40)
        alert(name + " is too long for our form, please abbreviate."); return false;
}

function phoneValidate(phone) {
    if (phone.length > 12 || phone == "" || !isNaN(phone))
        alert("Please enter a valid phone number."); return false;
}

function checkValidForOthers(name) {
    if (name.length > 40)
        alert(name + " is too long for our form, please abbreviate."); return false;
}

function messageCheck(message) {
    var currentLength = name.length;
    var over = 0;
    over = currentLength - 200;

    if (name.length > 200)
        alert(name + " is too long for our form, please abbreviate. You are " + over + " characters over allowed amount"); return false;
}

function radioCheck() {
    if (document.getElementById("yes").checked == false || document.getElementById("no").checked == false)
        return false;
}

function emailCheck(email) {
    var atpos = email.indexOf("@");
    var dotpos = email.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

我是否错误地调用了我的函数？老实说，我不确定我哪里出错了。
我不明白如何调试我的代码...我正在使用 chrome，但在控制台中没有收到任何错误。有没有办法设置断点来单步执行 javascript？

我意识到我刚刚在上面扔了很多代码，所以提前感谢您筛选它。

Answer 1

尝试不同的逻辑。您可以使用以下代码检查所有四 (4) 个条件以进行验证，例如非空、非空白、非未定义和非零仅在 javascript 和 jquery 中使用此代码 (!(!(variable)))。

function myFunction() {
var data;  //The Values can be like as null,blank,undefined,zero you can test

if(!(!(data)))
 {
 alert("data "+data);
 } 
 else 
 {
    alert("data is "+data);
}

}

Answer 2

您的第一个问题是forms，您的意思是form。见here

但是您的验证码还有其他问题，例如：

if (name == null || name == ' ')

在这里，您正在检查 name 是否为 null 或 name 是否为单个空格。我假设您想检查该字段是否为空白，但是在您的情况下，一个完全空的字符串将评估为 false，两个空格也是如此。你可能想要做的是这样的：

if (!name) {
    // tell the user they need to enter a value
}

方便地（或有时不），Javascript 将 null、空字符串或充满空格的字符串解释为 false，所以这应该涵盖您。

您还有很多其他问题，请参阅：

http://jsfiddle.net/FCwYW/2/

大部分问题都已被其他人指出。

• 如果后面有多行，则需要使用大括号{} if 声明。
• 通过验证时需要返回 true 测试或 Javascript 会将缺少返回值解释为 false。
• 只有当两个单选按钮都被选中时，您的radioCheck才会通过。
• 您在哪里检查您的电话号码是否不是 NaN（即它是一个数字），如果是则返回 false。

Answer 3

我建议学习一些新的调试技能。有一些方法可以分解这样的问题，从而快速隔离您的问题：

• 注释掉代码并逐步启用部分
• 使用调试器，例如 Firebug
• 使用console.log() 或alert() 调用
• 逐行审查您的代码并考虑它应该做什么

在您的情况下，我会首先查看 name 是否通过 console.log(name) 语句获得值，然后从那里继续前进。您会立即看到该名称没有获得值。这将导致发现您有一个错字（"forms" 而不是"form"）。

您的代码中的一些其他错误：

• 您在 validateExistence() 中的 if 语句之外返回 false：

  if (name == null || name == ' ')
      alert("You must enter a " + name + " to submit! Thank you."); 
      return false;
  

  在这种情况下，您的语句周围没有括号 {}。它看起来像return false 在if(){} 中，但不是。 每次调用此代码都会return false。不使用方括号适用于单个调用，但我不推荐它，因为当您添加额外代码时会导致此类问题。

• 在相同的代码中，当它确实是字段的值时，您使用name 作为字段名称：

  alert("You must enter a " + name + " to submit! Thank you."); return false;
  

  你真的想单独传递字段名：

  function validateExistence(name, field) {
      if (name == null || name == ' ') {
          alert("You must enter a " + field + " to submit! Thank you."); 
          return false;
      } else if (name.length > 40)
          alert(field + "value is too long for our form, please abbreviate."); 
          return false;
      }
  }
  

• 你没有打电话给radioCheck()，因为你缺少括号：

  if (radioCheck == false)
  

• 在radioCheck() 中，您使用的是|| 而不是&&。因为根据定义，至少 1 将始终未选中，因此您将始终无法通过此检查：

  if (document.getElementById("yes").checked == false || document.getElementById("no").checked == false) return false;
  

• 还有更多...

我的建议是一次启用一项检查，对其进行测试，一旦它按预期工作，就继续进行下一项。尝试一次全部调试非常困难。

Answer 4

这里是错误的：

替换var email = document.forms["forms"]["email"].value;

var email = document.forms["form"]["email"].value;

你的js里有很多地方：

var email = document.forms["forms"]["email"].value;

var phone = document.forms["forms"]["phone"].value;

var TimeForC = document.forms["forms"]["TimeForContact"].value;

var 可用性 = document.forms["forms"]["aval"].value;

您将 form 错误地输入为 forms。

有没有办法设置断点来单步执行 javascript？

是的，有一种方法可以设置断点：

请参考以下链接以了解在 Chrome 的调试器控制台中设置断点的方法：

LINK 1

LINK 2

Answer 5

以下应该可以解决眼前的问题：

function construct(form) {
  var 
    name = form["name"].value,
    companyName = form["companyName"].value,
    email = form["email"].value,
    phone = form["phone"].value,
    TimeForC = form["TimeForContact"].value,
    availability = form["aval"].value
  ;
  if (!validateExistence(name) || !validateExistence(companyName)) {
    return false;
  }
  else if (!radioCheck) {
    return false;
  }
  else if (phoneValidate(phone) == false) {
    return false;
  }
  else if (!checkValidForOthers(TimeForC) || !checkValidForOthers(availability)) {
    return false;
  }
  else if (emailCheck(email) == false) {
    return false;
  }
}

您在表单document.forms["forms"] 中有错字，其中“表单”不存在。您可以使用this 将当前元素传递给您的函数，而不是总是遍历对象来获取您的表单。

<form action="index.html" onsubmit="return construct(this);" method="post">

如果您刚开始，最好确保设置所有大括号（即大括号），因为这将帮助您避免在对齐和大括号匹配方面感到困惑。

Answer 6

替换var email = document.forms["forms"]["email"].value;

通过

var email = document.forms["form"]["email"].value;