Question

嗨，大家好我需要帮助，试图找出为什么警报框在我运行时不显示。我也是编程新手。 html我应该没问题。我目前正在上一个PHP课程，老师认为让我们创建一个表格并验证它会很有趣。我的问题是我试图调用函数然后验证它。我的问题是它没有调用它，我不知道为什么。请帮忙吗？

jons viladating

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
   <link rel="stylesheet" href="decor.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jons viladating</title>
<script type="text/javascript">
<!-- <![CDATA[
   function showjonsForm() {
var errors = "";
// check for any empty strings
  if (document.forms[0].fname.value == "")
      errors += "fname\n";
          if (document.forms[0].lname.value == "")
      errors += "lName\n";
  if (document.forms[0].addrs1.value == "")
  errors += "Address\n";
  if (document.forms[0].city.value == "")
  errors += "City\n";
  if (document.forms[0].state.value == "")
      errors += "State\n";
  if (document.forms[0].zip.value == "")
      errors += "Zip\n";
   if (document.forms[0].phone.value == "")
       errors += "Phone\n";
  if (document.forms[0].email.value == "")
      errors += "Email\n";
  if (document.forms[0].pw2.value == "")
      errors += "Confirm password\n";

   if (document.forms[0].dob.value == "")
      errors += "Date of birth\n";
  if (document.forms[0].sex.value == "")
     errors += "sex\n";
     // don't need to check checkboxes
   if (errors != "") {  //something was wrong}))
      alert ("Please fix these errors\n" + errors) ;
          return false;
 }
       var stringx;
    stringx = "fName:" + document.forms(0).fname.value;
    stringx = "lName:" + document.forms(0).lname.value;
    stringx += "\nAddress: " + document.forms(0).addrs1.value;
    stringx += "\nCity: " + document.forms(0).city.value;
    stringx += " \nState: " + document.forms(0).state.value;
    stringx += " Zip: "+ document.forms(0).zip.value;
    stringx += "\nPhone: " + document.forms(0).phone.value;
    stringx += "\nE-mail:" + document.forms(0).email.value;
    stringx += "\nConfirm password " + document.forms(0).pw2.value;
    stringx += "\nDate of birth: " + document.forms(0).dob.value;
    stringx += "\nSex: " + document.forms(0).sex.value;
    alert(stringx);
    return false //set to false to not submit
} 
 //  ]]> -->
</script>
   <h1>jons validations test</h1>
   </head>
 <body>
  <div id="rightcolumn">
 <img src="hula.gif"  align="right"/>   
 </div>
<text align="left">
   <form name="jon"  action="formoutput.php" onsubmit="return showjonsForm()"      Method="post"> 
  <fieldset style="width:250px">
   <label> first name</label> <input type="text" name="fname" size="15" maxlength="22"    onBlur="checkRequired( this,'fname')"/><br />
   <label>last name</label> <input type="text" name="lname" size="10" maxlength="22">      <br />
 </fieldset>
  <fieldset  style="width:250px">
  <label>address</label> <input type="text" name="adrs1" size="10" maxlength="30"><br />
   <span class="msg_container" id="adrs2"></span><br />
   <label>city</label> <input type="text" name="city" size="10" maxlength="15"><br />
   <span class="msg_container" id="city"></span><br />
   <label>state</label> <input type="text" name="state" size="10" maxlength="2"><br />
   <span class="msg_container" id="state"></span><br />
   <label>zip</label> <input type="text" name="zip" size="10" maxlength="5"><br />

  </fieldset>
  <fieldset style="width:250px">
   <label>phone</label> <input type="text" name="phone" size="10" maxlength="10"><br />
  <div>please input phone number in this format 1234567892 thank you </div>
   <label>email</label> <input type="text" name="email" size="10" maxlength="22"><br />
   <div> password must have 1 number  upper case and minimum of 6 charcters</div> 
   <label>password</label> <input type="text" name="pw2" size="10" maxlength="12"><br  />
   <label>select gender type</label> <select name="sex" size="1" <br />
   <option>male</option>
   <option>female</option>
   <option>timelord</option>
   </select>
   <label>date of birth</label> <input type="text  name="dob" size="8" maxlength="8"/>
   <div> would you like to know know more</div>
   <label> yes</label> <input type="checkbox"  checked="checked" name="check" />
   </fieldset>  
   <input type="submit"/></form>

   </form>
   <div id="footer">
   <img src="laps2.jpg"> <img src="orange.jpg"><img src="ok.jpg">
   </div>
   </body>
   </html>

Answer 1

<input type="text" name="adrs1" size="10" maxlength="30">

改为

<input type="text" name="addrs1" size="10" maxlength="30">

因为在您的JavaScript中，它是document.forms[0]. addrs1 .value

不相关

你的Javascipt看起来非常麻烦。也许你可以简化它？

您可以将所有document.forms[0].blah.value == ""简化为:(使用jQuery）

$("form > fieldset > input").each(function(){
    (this.value == "") && (errors += $(this).before().html() + "\n")
})

Answer 2

我刚刚验证了你的代码的两个字段我试图给你完整的代码，但在这里我面临stackoverflow中的probelm缩进因为这个原因我给你的图像 enter image description here 你的HTML代码部分

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <link rel="stylesheet" href="decor.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jons viladating</title>
<script type="text/javascript">
function showjonsForm(form) 
  {
    if(form.fname.value=="")
    {
        alert("Please Enter your First Name..");
        form.fname.focus();
        return false;
    }

    if(form.lname.value=="")
    {  
        alert("Please Enter your Last Name..");
        form.lname.focus();
        return false;
    }


}

</script>

 <body>


<h1>jons validations test</h1>
<form name="jon"  action="#" onsubmit="return showjonsForm(this)"      Method="post">
 <fieldset style="width:250px">
<label> first name</label> <input type="text" name="fname" size="15" maxlength="22"    onBlur="checkRequired( this,'fname')"/><br />
<label>last name</label> <input type="text" name="lname" size="10" maxlength="22">  <br />
 </fieldset>
<input type="submit"/></form>
  </body>


</html>

最后我可以给你代码：）

使用javascript进行php表单验证

3 个答案: