javascript - 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？

我意识到我只是在那里扔了很多代码，所以提前感谢您筛选它。

score 3 · Accepted Answer

这是错误：

代替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 的调试器控制台中设置断点的方法：

链接 1

链接 2

score 3 · Accepted Answer

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

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">

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

score 2 · Accepted Answer

你的第一个问题是forms你的意思form。看这里

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

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。

score 1 · Accepted Answer

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

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

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

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

您在以下if语句之外返回 false validateExistence()：
```
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;
```
和更多...

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

score 0 · Accepted Answer

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

经过

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

score 0 · Accepted Answer

尝试不同的逻辑。您可以使用波纹管代码检查所有四 (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 - JavaScript 无响应验证

6 回答 6

Related

Reference