Question

我尝试使用以下代码在用户提交之前验证我的表单。

的javascript：

<script>
    function validateForm() {
     var x = document.forms["register"]["firstname"].value;
     var x = document.forms["register"]["lastname"].value;
     var x = document.forms["register"]["email"].value;
     var x = document.forms["register"]["email2"].value;
     if (x == null || x == "") {
         $(".form_error").show();
         return false;
     }
 }
 </script>

我的表单基本上是这样的：

第1节：

<form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

<input type="text" name="firstname" class="login_form2"><br/>
<input type="text" name="lastname" class="login_form2"><br/>

第2节

<form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

<div class="form_error2">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

<input type="text" name="email" class="login_form2"><br/>
<input type="text" name="email2" class="login_form2"><br/>

第3节

    <form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

    <div class="form_error3">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

    <input type="text" name="username" class="login_form2"><br/>
    <input type="text" name="password" class="login_form2"><br/>

我基本上把我的表单分成了三个部分，当用户提交表单时，他们假设得到3个可能的错误/ div之一，告诉用户他们需要返回并修改哪个部分。

我正在尝试修改我的javascript代码，如下所示我基本上可以对每个部分的表单中的输入框运行不同的检查，并根据相应部分中的哪个输入框导致错误显示不同的div元素。有人可以告诉我我需要做些什么来完成这项工作。提前谢谢。

<script>
        function validateForm() {
         var x = document.forms["register"]["firstname"].value;
         var x = document.forms["register"]["lastname"].value;
         if (x == null || x == "") {
         $(".form_error").show();
         return false;
         var x = document.forms["register"]["email"].value;
         var x = document.forms["register"]["email2"].value;
         if (x == null || x == "") {
             $(".form_error2").show();
             return false;
         var x = document.forms["register"]["username"].value;
         var x = document.forms["register"]["password"].value;
         if (x == null || x == "") {
             $(".form_error2").show();
             return false;



         }
     }
     </script>

Answer 1

每次执行此操作：

var x = document.forms["register"]["firstname"].value;
var x = document.forms["register"]["lastname"].value;

你（不必要地）重新宣布x，并丢弃第一个字段的值。它永远不会被检查。

你也错过了一些结束}。

尝试类似：

function validateForm() {
  var x = document.forms["register"]["firstname"].value;
  var y = document.forms["register"]["lastname"].value;
  if ((! x) || (! y)) {     // "! x" covers both null and "" cases
    $(".form_error").show();
    return false;
  } 

  x = document.forms["register"]["email"].value;
  y = document.forms["register"]["email2"].value;
  if ((! x) || (! y)) {     
    $(".form_error2").show();
    return false;
  }

  x = document.forms["register"]["username"].value;
  y = document.forms["register"]["password"].value;
  if ((! x) || (! y)) {     
    $(".form_error2").show();
    return false;
  }
}

Answer 2

这可能只是我，但你在这里反复重写x的值：

var x = document.forms["register"]["firstname"].value;
var x = document.forms["register"]["lastname"].value;
var x = document.forms["register"]["email"].value;
var x = document.forms["register"]["email2"].value;

它在我看来，每次x都会被赋予一个新值，然后只包含它被赋值的最后一个值。基本上，如果填写了最后一个框，表格将被计入＆＃34;有效＆＃34;。创建一个数组并将每个值存储到自己的索引中，然后使用for循环遍历它们并检查是否有任何等于null或空字符串。

var x = [];
x[0] = document.forms["register"]["firstname"].value;
x[1] = document.forms["register"]["lastname"].value;
x[2] = document.forms["register"]["email"].value;
x[3] = document.forms["register"]["email2"].value;

x.forEach(function(element, index, array) {

if (element == null || element == "") {

$(".form_error").show();
return false;

}

});

用javascript验证表单？

2 个答案: