Fatal编程技术网
  • javascript/
  • 使用JavaScript/HTML进行基本表单验证

使用JavaScript/HTML进行基本表单验证

javascript html forms validation

使用JavaScript/HTML进行基本表单验证,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我正在为我制作的联系我们表单编写表单验证脚本。脚本非常简单，我想知道为什么它不能正常工作 无论我在哪个字段中包含内容，它总是说在运行脚本后该字段是空的 这是我的密码： var firstName = document.getElementById("fname"); var lastName = document.getElementById("lname"); var email = document.getElementById("email"); var message = doc

我正在为我制作的联系我们表单编写表单验证脚本。脚本非常简单，我想知道为什么它不能正常工作

无论我在哪个字段中包含内容，它总是说在运行脚本后该字段是空的

这是我的密码：

    var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var email = document.getElementById("email");
var message = document.getElementById("msg");
var errors = "";

function formValidation() {
    if (firstName==="" || firstName=== null)
    {
        errors += "-The First Name field is blank! \n";
    }   
    if (lastName==="" || lastName=== null)
    {
        errors += "-The Last Name field is blank! \n";

    }   
    if (email==="" || email=== null)
    {
        errors += "-The E-mail Address field is blank! \n";

    }
    if (message==="" || message=== null)
    {
        errors += "-The Message field is blank! \n";

    }

    if (errors !== "") {
        alert("Whoops! \n \n" + errors);    
    }
    if (errors === "") {
        alert("Message Sent!");
    }

}
此外，下面是我制作的JSFIDLE：

谢谢。

首先，您试图在元素存在于DOM中之前通过其ID获取元素（脚本位于表单上方）

其次，如果您纠正了这一点，那么您将把HTMLInputElements本身与一个空字符串进行比较，而不是将它们的
.value
属性进行比较

第三，您从不重置
错误
，因此，如果任何人确实收到错误并修复了它，他们在重试时仍会收到错误警报

将
.value
添加到您试图获取的元素中，并移动以下代码，使其位于函数内部

var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
您也只在使用提交按钮提交表单时检查错误。您应该在提交表单时执行此操作

将
onclick
属性内容移动到表单元素上的
onsubmit
属性。更好的是

出现错误时，您没有阻止窗体的正常操作。大概您希望它停止提交数据。要么：

  • 使用
    addEventListener
    （见上文），接受函数的参数，并在出现错误或错误时对该参数的值调用
    .preventDefault（）
  • 将
    return
    添加到您的
    onsubmit
    属性值的前面，并在出现错误时从函数中选择
    return false
    • 还要注意

    • )；对于属性，它们需要
    • 值
      s将始终是字符串，因此与
      null
      进行比较没有意义
    首先，您试图在元素存在于DOM中之前通过其ID获取元素（脚本位于表单上方）

    其次，如果您纠正了这一点，那么您将把HTMLInputElements本身与一个空字符串进行比较，而不是将它们的
    .value
    属性进行比较

    第三，您从不重置
    错误
    ，因此，如果任何人确实收到错误并修复了它，他们在重试时仍会收到错误警报

    将
    .value
    添加到您试图获取的元素中，并移动以下代码，使其位于函数内部

    var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
    您也只在使用提交按钮提交表单时检查错误。您应该在提交表单时执行此操作

    将
    onclick
    属性内容移动到表单元素上的
    onsubmit
    属性。更好的是

    出现错误时，您没有阻止窗体的正常操作。大概您希望它停止提交数据。要么：

  • 使用
    addEventListener
    （见上文），接受函数的参数，并在出现错误或错误时对该参数的值调用
    .preventDefault（）
  • 将
    return
    添加到您的
    onsubmit
    属性值的前面，并在出现错误时从函数中选择
    return false
    • 还要注意

    • )；对于属性，它们需要
    • 值
      s将始终是字符串，因此与
      null
      进行比较没有意义
    首先，您试图在元素存在于DOM中之前通过其ID获取元素（脚本位于表单上方）

    其次，如果您纠正了这一点，那么您将把HTMLInputElements本身与一个空字符串进行比较，而不是将它们的
    .value
    属性进行比较

    第三，您从不重置
    错误
    ，因此，如果任何人确实收到错误并修复了它，他们在重试时仍会收到错误警报

    将
    .value
    添加到您试图获取的元素中，并移动以下代码，使其位于函数内部

    var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
    您也只在使用提交按钮提交表单时检查错误。您应该在提交表单时执行此操作

    将
    onclick
    属性内容移动到表单元素上的
    onsubmit
    属性。更好的是

    出现错误时，您没有阻止窗体的正常操作。大概您希望它停止提交数据。要么：

  • 使用
    addEventListener
    （见上文），接受函数的参数，并在出现错误或错误时对该参数的值调用
    .preventDefault（）
  • 将
    return
    添加到您的
    onsubmit
    属性值的前面，并在出现错误时从函数中选择
    return false
    • 还要注意

    • )；对于属性，它们需要
    • 值
      s将始终是字符串，因此与
      null
      进行比较没有意义
    首先，您试图在元素存在于DOM中之前通过其ID获取元素（脚本位于表单上方）

    其次，如果您纠正了这一点，那么您将把HTMLInputElements本身与一个空字符串进行比较，而不是将它们的
    .value
    属性进行比较

    第三，您从不重置
    错误
    ，因此，如果任何人确实收到错误并修复了它，他们在重试时仍会收到错误警报

    将
    .value
    添加到您试图获取的元素中，并移动以下代码，使其位于函数内部

    var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
    您也只在使用提交按钮提交表单时检查错误。您应该在提交表单时执行此操作

    将
    onclick
    属性内容移动到表单元素上的
    onsubmit
    属性。更好的是，。