Question

我是JavaScript的新手。无法找到答案。我不确定它是否相关。我有一个2个字段的注册表。提交时，应该进行验证。在我的代码中，如果条件有效，则首先编写。如果第一个if语句被注释，则第二个条件有效。

HTML CODE：

<body>
        <div align="center">
            <h1>REGISTRATION</h1>

            <form action="" method="post" name="reg">
                    <table>         
                        <tr>
                            <td><label> Enter Full Name : </label></td>
                            <td><input type="text" id="id1" name="username" placeholder="minimum 6 charactors"></td>
                        </tr>
                        <tr><td></td><td><label style="color:red;" id="label1"></label></td></tr>

                        <tr>
                            <td><label> Gender : </label></td>
                                <td><input type="radio" name="gender" value="female"><label> Female </label>
                                <input type="radio" name="gender" value="male"><label> Male </label></td>
                        </tr>
                        <tr><td></td><td><label style="color:red;" id="label2"></label></td></tr>


                    </table>
                    <br/><button name="submit" value="submit" onclick="return validate_form()">Submit</button>  
            </form>

        </div>

    </body>

JS：

<script type="text/javascript">

            function validate_form () 
            {
                var name=document.getElementById("id1").value;
                var gender=document.getElementsByName("gender");

                if(name=="")
                {
                    document.getElementById("label1").innerHTML="Enter Name";
                    return false;
                }
                else if(name.length<6)
                {
                    document.getElementById("label1").innerHTML="Minimum 6 charactors";
                    return false;
                }
                else
                {
                    return true;
                }
                if(gender.checked)
                {
                    return true;
                }
                else
                {
                    document.getElementById("label2").innerHTML="Check gender";
                    return false;
                }
            }

        </script>

在JSFiddle中，它会出现类似

的错误

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x56ae150>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x56b3ed0>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x56ae150>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x5c03510>, 'help_text': '', 'name': 'js_wrap'}"}

我不知道这个错误意味着什么！

Answer 1

您必须稍微重写验证码。查看演示 - Demo：

你的问题：

函数在选中gender之前返回;
您不能以这种方式检查多个复选框：if(gender.checked)

以下是工作代码

    function validate_form() {
        var name = document.getElementById("id1").value,
            gender = document.getElementsByName("gender"),
            result = true,
            genderPass = 0;

        if (name == "") {
            document.getElementById("label1").innerHTML = "Enter Name";
            result = false;
        } else if (name.length < 6) {
            document.getElementById("label1").innerHTML = "Minimum 6 charactors";
            result = false;
        } else {
          document.getElementById("label1").innerHTML = "";
      }

        Array.prototype.forEach.call(gender, function(item) {
            genderPass += item.checked ? 1 : 0
        });
        if (genderPass === 0) {
            document.getElementById("label2").innerHTML = "Check gender";
            result = false;
        } else {
          document.getElementById("label2").innerHTML = "";
      }


        return result;
    }

＆＃13;

    function validate_form() {
        var name = document.getElementById("id1").value,
            gender = document.getElementsByName("gender"),
            result = true,
            genderPass = 0;

        if (name == "") {
            document.getElementById("label1").innerHTML = "Enter Name";
            result = false;
        } else if (name.length < 6) {
            document.getElementById("label1").innerHTML = "Minimum 6 charactors";
            result = false;
        } else {
          document.getElementById("label1").innerHTML = "";
      }

        Array.prototype.forEach.call(gender, function(item) {
            genderPass += item.checked ? 1 : 0
        });
        if (genderPass === 0) {
            document.getElementById("label2").innerHTML = "Check gender";
            result = false;
        } else {
          document.getElementById("label2").innerHTML = "";
      }


        return result;
    }

＆＃13;

        <div align="center">
            <h1>REGISTRATION</h1>

            <form action="" method="post" name="reg">
                    <table>         
                        <tr>
                            <td><label> Enter Full Name : </label></td>
                            <td><input type="text" id="id1" name="username" placeholder="minimum 6 charactors"></td>
                        </tr>
                        <tr><td></td><td><label style="color:red;" id="label1"></label></td></tr>

                        <tr>
                            <td><label> Gender : </label></td>
                                <td><input type="radio" name="gender" value="female"><label> Female </label>
                                <input type="radio" name="gender" value="male"><label> Male </label></td>
                        </tr>
                        <tr><td></td><td><label style="color:red;" id="label2"></label></td></tr>


                    </table>
                    <br/><button name="submit" value="submit" onclick="return validate_form();">Submit</button>  
            </form>

        </div>

＆＃13;

Answer 2

当函数命中return行时，它会离开（即返回）函数，并且不执行该函数中的任何其他操作。

人们通常会做一个名为valid的变量或类似的变量，默认为true。然后他们有if个语句，只检查会使表单无效的内容。如果其中一个if语句被触发，它会处理问题（例如告诉用户他们需要填写性别）并将valid设置为false。最后，只有在结束时，它返回valid。这样，如果有任何事情使表单无效，该函数将返回无效，但如果多个if语句被触发，则不会发生任何错误，因为您可以将valid设置为false根据需要多次，不会造成任何问题。

Answer 3

你可以这样做。

<script type="text/javascript">

            function validate_form () 
            {
                var name=document.getElementById("id1").value;
                var gender=document.getElementsByName("gender");

                var boolValidateName = validateName(name);
                var boolValidateGnder = validateGnder(name);

                if(boolValidateName && boolValidateGnder){

                    //if both are validate
                }else{
                    //if either of or both not validate
                }


            }

            var validateName = function (name){

                if(name=="")
                {
                    document.getElementById("label1").innerHTML="Enter Name";
                    return false;
                }
                else if(name.length<6)
                {
                    document.getElementById("label1").innerHTML="Minimum 6 charactors";
                    return false;
                }
                else
                {
                    return true;
                }

            }

            var validateGender = function(gender){

                if(gender.checked)
                {
                    return true;
                }
                else
                {
                    document.getElementById("label2").innerHTML="Check gender";
                    return false;
                }

            }

        </script>

您的return声明放置得不是很好。您可以将您的业务登录分解为function并调用它。因此，每个return语句都有相同的运行机会。

Answer 4

getElementsByName将返回nodelist。您必须迭代它才能获得检查值。

另请注意， return结束当前函数并将执行流返回给调用函数，因此执行return后的任何代码行都不会被执行。

不要忘记清空（''）错误消息。

试试这个：

function validate_form() {
  var name = document.getElementById("id1").value;
  var gender = document.getElementsByName("gender");
  document.getElementById("label1").innerHTML = '';
  document.getElementById("label2").innerHTML = '';
  var genValue = '';
  for (var i = 0; i < gender.length; i++) {
    if (gender[i].checked) {
      genValue = gender[i].value;
    }
  }
  if (!name) {
    document.getElementById("label1").innerHTML = "Enter Name";
    return false;
  } else if (name.length < 6) {
    document.getElementById("label1").innerHTML = "Minimum 6 charactors";
    return false;
  } else if (!genValue) {
    document.getElementById("label2").innerHTML = "Check gender";
    return false;
  }
  return true;
}

<div align="center">
  <h1>REGISTRATION</h1>
  <form action="" method="post" name="reg">
    <table>
      <tr>
        <td>
          <label>Enter Full Name :</label>
        </td>
        <td>
          <input type="text" id="id1" name="username" placeholder="minimum 6 charactors">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <label style="color:red;" id="label1"></label>
        </td>
      </tr>

      <tr>
        <td>
          <label>Gender :</label>
        </td>
        <td>
          <input type="radio" name="gender" value="female">
          <label>Female</label>
          <input type="radio" name="gender" value="male">
          <label>Male</label>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <label style="color:red;" id="label2"></label>
        </td>
      </tr>
    </table>
    <br/>
    <button name="submit" value="submit" onclick="return validate_form()">Submit</button>
  </form>
</div>

Fiddle here

Answer 5

当你的第一个if..else语句块返回时，它会返回整个函数，而if的性别甚至不会运行。删除：

  else
  {
    return true;
  }

可以在javascript中的函数内放置两个或多个条件语句吗？

5 个答案: