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

这是错误的：

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

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

你的js里有很多地方：

var email = document.forms [“表格”] [“电子邮件”]。值;

var phone = document.forms [“表格”] [“电话”]。值;

var TimeForC = document.forms [“ forms ”] [“TimeForContact”]。value;

var availability = document.forms [“表格”] [“aval”]。value;

您错误输入表单为表单。

有没有办法设置断点来逐步浏览javascript？

是的，有办法设置断点：

enter image description here

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

<强> LINK 1

<强> LINK 2

Answer 2

以下内容应解决当前问题：

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 3

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

但您的验证码存在其他问题，例如：

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

在这里，您要检查name是否为null或名称是否为单个空格。我假设您要检查字段是否为空，但是在您的条件中，完全为空的字符串将评估为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 4

我建议学习一些新的调试技巧。有很多方法可以解决这样的问题，这会快速隔离你的问题：

逐位评论代码和启用部件
使用Firebug等调试器
使用console.log()或alert()来电
逐行检查您的代码并思考它应该做什么

在你的情况下，我会首先看到name是否有console.log(name)语句的值，然后从那里向前移动。您会立即看到该名称没有获得值。这将导致您发现输入错误（"forms"而不是"form"）。

代码中的其他一些错误：

您在if的{{1}}声明之外返回false：
```
validateExistence()
```
在这种情况下，您的陈述周围没有括号if (name == null || name == ' ') alert("You must enter a " + name + " to submit! Thank you."); return false;。像<{1}}一样外观在{}中，但事实并非如此。 对此代码的每次调用都将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，因此您将始终无法通过此检查：
```
||
```
还有更多......

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

Answer 5

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

通过

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

Answer 6

您可以使用波纹管代码检查所有四（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);
}

}

JavaScript没有验证响应

6 个答案: