Question

我很难理解哪里有错误。经过多次尝试，我倾向于认为它是overalcheck（）的一些东西...... 追加，clearelement和writeto是额外的迷你功能，他们是完全正常的。因此，此脚本检查表单，如果一切正常，则打开一个新页面。但是，如果字段为空或类型错误，则会显示相对错误消息（或错误消息列表）。我做了很多变化，有时它打开没有完整的表单（如下面的代码），有时它只显示1个字段的错误消息然后，即使你完成所有字段，它仍然没有打开一个新的页面。我很感激你的帮助。

 <script>

    function overallcheck ()
    {
        if(!checkname() || !checkemail() || !checkjob())
        {
            writeTo("problemArea","Error messages area");

            if(!checkname())
                writeTo("problemArea","Please insert a valid name");
            if(!checkemail())
                writeTo("problemArea","Please insert a valid email");
            if(!checkjob())
                writeTo("problemArea","Please insert your job");
            return false;                   
        }
        return true;
    }

    function checkname()
    {
        clearElement("problemArea");
        var fullname = document.forms['form'].fullname.value;
        if (fullname.length == 0 || !isNaN(fullname)) 
            return false;
    }

    function checkemail()
    {
        clearElement("problemArea");
        var mail = document.forms['form'].Email.value;
        if (mail == '' || mail.indexOf('@') == -1 || mail.indexOf('.') == -1) 
            return false;
    }

    function checkjob()
    {
        clearElement("problemArea");
        var i;
        for (i=0;i<4;i++)
        {
            if (document.forms['form'].job[i].checked) {return true;}
        }
        return false;
    }

    </script>

    <body>
      <form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
<table>

                <tr>
                    <td><b><p>blabla?</p></b> </td>
                    <td> <input type="text" name="fullname"  size="20" placeholder="Enter a valid name"/> </td>
                </tr>

                <tr>
                    <td><b><p> E-mail: </p></b></td> 
                    <td><input type="email" name="email" maxlength="15" size = "20" placeholder="Enter a valid email address"/> </td>
                </tr>

<tr>
<p><td><b><p>bla?</td></p>
                <td>1<input type="radio" name="job" value="gov" /><br/>
                2<input type="radio" name="job" value="pri" /><br/><div id="problemArea"> </div>
                3<input type="radio" name="job" value="unem" /><br/>
                                4<input type="radio" name="job" value="other" /><br/>

</td></tr>
</table>
            <p>
                <button type="submit" onclick="" >clickme</button>

        </form>
</body>

</html>

Answer 1

使用它自己的div跟踪每个错误类型。在try catch中包含整体检查并提醒错误。这有助于找到“电子邮件”错误。

function writeTo(id, msg) {
  document.getElementById(id).innerHTML += "<p>" + msg + "</p>";
}

function clearElement(id) {
  document.getElementById(id).innerHTML = "";
}

function overallcheck() {
  try {
    if (!checkname() || !checkemail() || !checkjob()) {


      if (!checkname())
        writeTo("problem_fullname", "Please insert a valid name");
      if (!checkemail())
        writeTo("problem_email", "Please insert a valid email");
      if (!checkjob())
        writeTo("problem_blah", "Please insert your job");
      return false;
    }
    return true;
  } catch (err) {
    alert(err);
  }
}

function checkname() {
  clearElement("problem_fullname");
  var fullname = document.forms['form'].fullname.value;
  if (fullname.length == 0 || !isNaN(fullname)) {
    return false;
  }
  return true;
}

function checkemail() {
  clearElement("problem_email");
  var mail = document.forms['form'].email.value; //Email.value;
  if (mail == '' || mail.indexOf('@') == -1 || mail.indexOf('.') == -1) {
    return false;
  }
  return true;
}

function checkjob() {
  clearElement("problem_blah");
  var i;
  for (i = 0; i < 4; i++) {
    if (document.forms['form'].job[i].checked) {
      return true;
    }
  }
  return false;
}

td {
  vertical-align: text-top;
}
.problem {
  color: red;
}

<form onsubmit="return overallcheck();" action="res.html" id=form target="_blank" method="GET">
  <table>

    <tr>
      <td><b><p>blabla?</p></b> 
      </td>
      <td>
        <input type="text" name="fullname" size="20" placeholder="Enter a valid name" />
        <div id="problem_fullname" class="problem"></div>
      </td>
    </tr>

    <tr>
      <td><b><p> E-mail: </p></b>
      </td>
      <td>

        <input type="email" name="email" maxlength="15" size="20" placeholder="Enter a valid email address" />
        <div id="problem_email" class="problem"></div>
      </td>
    </tr>

    <tr>
      <p>
        <td><b><p>bla?</td></p>
                <td>
                1<input type="radio" name="job" value="gov" /><br/>
                2<input type="radio" name="job" value="pri" /><br/>
                3<input type="radio" name="job" value="unem" /><br/>
                4<input type="radio" name="job" value="other" /><br/>
                <div id="problem_blah" class="problem"> </div>

</td></tr>
</table>
            <p>
                <button type="submit" onclick="" >clickme</button>

        </form>

Javascript验证脚本

1 个答案: