Question

我只是第五学期开始学习网络编程的IT学生，我必须在这样的条件下验证 地址textarea ：

地址：

必须填写。
应超过14个字符。
必须以'Street'开头。
仅限字母数字。

<html>
  <head>
    <title>Baggy Bag Shop Membership Registration</title>
    <link href="mystyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" lang="javascript">
      function validasi() {
        var nama = document.getElementById("nama");
        var password = document.getElementById("password");
        var konfirmasi = document.getElementById("konfirmasi");
        var email = document.getElementById("email");
        var phone = document.getElementById("phone");
        var radio1 = document.getElementById("male").checked;
        var radio2 = document.getElementById("female").checked;
        var address = document.getElementById("address");
        var agreement = document.getElementById("agreement");


        if (nama.value == "") {
          alert("Please fill in your name!");
          return false;
        }

        if ((nama.value).length < 7) {
          alert("Username must be more than 6 characters.");
          return false;
        }

        if (password.value == "") {
          alert("Please fill your password");
          return false;
        }

        if ((password.value).length < 8) {
          alert("Password length must be more than 7 characters.");
          return false;
        }

        if (konfirmasi.value == "") {
          alert("Enter the password confirmation!");
          return false;
        }

        if (konfirmasi.value != password.value) {
          alert("Password confirmation does not match!");
          return false;
        }

        if (email.value == "") {
          alert("Please enter your E-Mail address!");
          return false;
        }

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(email.value) == false) {
          alert('Invalid email address');
          return false;
        }

        if (phone.value == "") {
          alert("Please fill out your phone number");
          return false;
        }

        if (isNaN(phone.value)) {
          alert("Invalid Phone number!");
          return false;
        }

        if ((radio1 == "") && (radio2 == "")) {
          alert("Please state your gender");
          return false;
        }



        if (agreement.checked != 1) {
          alert("You must agree to the terms and conditions");
          return false;
        }

      }
    </script>
  </head>

  <body>
    <div id="container">
      <div id="header">~Baggy Bag Shop~
        <div id="logo">
          <img src="handbag3.jpg" height="130px" width="300px" />
        </div>
      </div>
      <div id="menu">
        <h2>  Menu</h2>

            <h3><ul><li><a href="home.html">Home</a></li><br>
                    <li><a href="product.html">Products</a></li><br>
                    <li><a href="registration.html">Registration</a></li><br>
                    <li><a href="aboutus.html">About Us</a></li><br>
                    <li><a href="contactus.html">Contact Us</a></li> <ul></h3>
      </div>
      <div id="contentarea">
         <h1>Create a membership for our newsletter and get special offers!</h1>

        <form name="membership" action="afterregis.html" method="get" onsubmit="return validasi();">
          <table align="center">
            <tr>
              <td>Name:</td>
              <td>
                <input type="text" name="nama" id="nama" placeholder="Enter Username" />
              </td>
            </tr>
            <tr>
              <td>Password:</td>
              <td>
                <input type="password" name="password" id="password" placeholder="Enter Password" />
              </td>
            </tr>
            <tr>
              <td>Confirm Password:</td>
              <td>
                <input type="password" name="konfirmasi" id="konfirmasi" placeholder="Confirm your Password" />
              </td>
            </tr>
            <tr>
              <td>E-mail Address:</td>
              <td>
                <input type="text" name="email" id="email" placeholder="Enter an Email Address" />
              </td>
            </tr>
            <tr>
              <td>Phone:</td>
              <td>
                <input type="text" name="phone" id="phone" placeholder="Enter your phone number" />
              </td>
            </tr>
            <tr>
              <td>Gender:</td>
              <td>
                <input type="radio" name="gender" id="male" value="male" />Male
                <input type="radio" name="gender" id="female" value="female" />Female</td>
            </tr>
            <tr>
              <td>Address:</td>
              <td>
                <textarea cols="30" rows="4"></textarea>
              </td>
            </tr>
            <tr>
              <td>Terms & Condition:</td>
              <td>
                <textarea rows="4" cols="50" readonly>By becoming a member, your data will be used for the sole purpose of Baggy Bag Shop in anyway, including selling it to a third party.</textarea>
                <br>
                <input type="checkbox" name="agreement" id="agreement" />I Agreed with the above Terms & Conditions.</td>
            </tr>
            <tr>
              <td align="right">
                <input type="submit" id="submit" name="submit" value="SUBMIT" onclick="return validasi" />
              </td>
              <td align="left">
                <input type="reset" id="reset" name="reset" value="RESET" />
              </td>
            </tr>
          </table>
        </form>
      </div>
      <div id="footer">
        <p>Copyright&copy;2014</p>
      </div>
    </div>
  </body>

</html>

Answer 1

永远不要调用表单对象＆＃34;提交＆＃34;
永远不要将事件处理程序添加到提交按钮，而是将其添加到表单提交事件
您有两个验证，一个在按钮上，一个内联在提交事件

以下是如何在onload事件中添加事件 - 另请注意我添加了id =＆＃34; address＆＃34;到textarea并修复了针对性别按钮和协议复选框的布尔值测试

＆＃13;

    window.onload = function() {
      document.getElementById("membership").onsubmit = function() {
        var nama = document.getElementById("nama");
        var password = document.getElementById("password");
        var konfirmasi = document.getElementById("konfirmasi");
        var email = document.getElementById("email");
        var phone = document.getElementById("phone");
        var radio1 = document.getElementById("male").checked;
        var radio2 = document.getElementById("female").checked;
        var address = document.getElementById("address");
        var agreement = document.getElementById("agreement");


        if (nama.value == "") {
          alert("Please fill in your name!");
          return false;
        }

        if (nama.value.length < 7) {
          alert("Username must be more than 6 characters.");
          return false;
        }

        if (password.value == "") {
          alert("Please fill your password");
          return false;
        }

        if (password.value.length < 8) {
          alert("Password length must be more than 7 characters.");
          return false;
        }

        if (konfirmasi.value == "") {
          alert("Enter the password confirmation!");
          return false;
        }

        if (konfirmasi.value != password.value) {
          alert("Password confirmation does not match!");
          return false;
        }

        if (email.value == "") {
          alert("Please enter your E-Mail address!");
          return false;
        }

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(email.value) == false) {
          alert('Invalid email address');
          return false;
        }

        if (phone.value == "") {
          alert("Please fill out your phone number");
          return false;
        }

        if (isNaN(phone.value)) {
          alert("Invalid Phone number!");
          return false;
        }

        if (!radio1 && !radio2) {
          alert("Please state your gender");
          return false;
        }

        if (address.value == "") {
          alert("Please fill your address");
          return false;
        }

        if (address.value.length < 14) {
          alert("Address length must be more than 14 characters.");
          return false;
        }

        if (address.value.indexOf("Street")==-1) {
          alert("Address must start with \"Street\".");
          return false;
        }

        if (!agreement.checked) {
          alert("You must agree to the terms and conditions");
          return false;
        }
        return true; // allow submit
      }
    }

＆＃13;

<div id="container">
  <div id="header">~Baggy Bag Shop~
    <div id="logo">
      <img src="handbag3.jpg" height="130px" width="300px" />
    </div>
  </div>
  <div id="menu">
    <h2>  Menu</h2>
    <h3>
             <ul>
                 <li><a href="home.html">Home</a></li><br>
                 <li><a href="product.html">Products</a></li><br>
                 <li><a href="registration.html">Registration</a></li><br>
                 <li><a href="aboutus.html">About Us</a></li><br>
                 <li><a href="contactus.html">Contact Us</a></li>
             <ul>
         </h3>
  </div>
  <div id="contentarea">
    <h1>Create a membership for our newsletter and get special offers!</h1>
    <form id="membership" action="afterregis.html" method="get">
      <table align="center">
        <tr>
          <td>Name:</td>
          <td>
            <input type="text" name="nama" id="nama" placeholder="Enter Username" />
          </td>
        </tr>
        <tr>
          <td>Password:</td>
          <td>
            <input type="password" name="password" id="password" placeholder="Enter Password" />
          </td>
        </tr>
        <tr>
          <td>Confirm Password:</td>
          <td>
            <input type="password" name="konfirmasi" id="konfirmasi" placeholder="Confirm your Password" />
          </td>
        </tr>
        <tr>
          <td>E-mail Address:</td>
          <td>
            <input type="text" name="email" id="email" placeholder="Enter an Email Address" />
          </td>
        </tr>
        <tr>
          <td>Phone:</td>
          <td>
            <input type="text" name="phone" id="phone" placeholder="Enter your phone number" />
          </td>
        </tr>
        <tr>
          <td>Gender:</td>
          <td>
            <input type="radio" name="gender" id="male" value="male" />Male
            <input type="radio" name="gender" id="female" value="female" />Female</td>
        </tr>
        <tr>
          <td>Address:</td>
          <td>
            <textarea id="address" cols="30" rows="4"></textarea>
          </td>
        </tr>
        <tr>
          <td>Terms & Condition:</td>
          <td>
            <textarea rows="4" cols="50" readonly>By becoming a member, your data will be used for the sole purpose of Baggy Bag Shop in anyway, including selling it to a third party.</textarea>
            <br>
            <input type="checkbox" name="agreement" id="agreement" />I Agreed with the above Terms & Conditions.</td>
        </tr>
        <tr>
          <td align="right">
            <input type="submit" value="SUBMIT" />
          </td>
          <td align="left">
            <input type="reset" id="reset" name="reset" value="RESET" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <div id="footer">
    <p>Copyright&copy;2014</p>
  </div>
</div>

＆＃13;

在此条件声明中验证Javascript表单？

1 个答案: