0

当我在 jQuery 中添加远程规则时,我正在使用我正在构建的表单在 Internet Explorer 上遇到一些奇怪的行为,即使用“check_username.php”与“用户名”相关的远程验证规则。在下面的代码中,我使用了一个 view.php 脚本,该脚本利用了 jquery 脚本并创建了“page_start”自定义函数,该函数用于在整个站点的页面上获得统一的视图。这些是 view.php 上的 jquery 脚本:

<script type="text/javascript" src="/StructuredPages/js/jquery.js"></script>
<script type="text/javascript" src="/StructuredPages/js/jquery.validate.js"></script>
<script type="text/javascript" src="/StructuredPages/js/jquery.validate.password.js"></script>

这是我想要客户端验证的表单代码,然后通过 create_user_redo_old.php 文件进行服务器端验证。

    <?php

    require_once $_SERVER['DOCUMENT_ROOT'] . "/StructuredPages/scripts/view.php";

    $inline_javascript = <<<EOD
        $(document).ready(function() {
          $("#signup_form").validate({
            rules: {
          first_name: {
            minlength : 2
          },
              last_name: {
            minlength : 2
          },
          username: {
            minlength: 4,
        remote: "check_username.php"
          },
              street: {
            minlength : 5
          },
          city: {
            minlength : 2
          },
          postal_code: {
        minlength: 5
          },
              password: {
                minlength: 6
              },
              confirm_password: {
                minlength: 6,
                equalTo: "#password"
              }
            },
            messages: {
          first_name: {
            minlength: "First Name must contain at least 2 characters"
           },
          last_name: {
                minlength: "Last Name must contain at least 2 characters"
          },
          username: {
            minlength: "Username must contain at least 4 characters",
        remote: "Username already exists, please try another"
          },
          street: {
            minlength: "Street must contain at least 5 characters"
              },
          city: {
            minlength: "City must contain at least 2 characters"
          },
            postal_code: {
                minlength: "Zip Code must contain 5 numerals"
              },
              password: {
                minlength: "Passwords must be at least 6 characters"
              },
              confirm_password: {
                minlength: "Passwords must be at least 6 characters",
                equalTo: "Your passwords do not match."
              }
            }
          });
        });
    EOD;

    page_start("Free Member Registration", $inline_javascript); 
    ?>

    <div id="content">
    <h1>Member Registration</h1>
    <p>Please enter your information below:</p>
    <form id="signup_form" action="create_user_redo_old.php" 
          method="POST" enctype="multipart/form-data">
      <fieldset>
        <label for="first_name">First Name:</label> 
        <input type="text" name="first_name" id="first_name" size="20" class="required" /><br />
        <label for="last_name">Last Name:</label> 
        <input type="text" name="last_name" id-"last_name" size="20" class="required" /><br />
        <label for="username">Username:</label> 
        <input type="text" name="username" id="username" size="20" class="required" /><br />
        <label for="password">Password:</label> 
        <input type="password" id="password" name="password" 
               size="20" class="required password" />
        <div class="password-meter">
          <div class="password-meter-message"> </div>
          <div class="password-meter-bg">
            <div class="password-meter-bar"></div>
          </div>
        </div>
        <br />
        <label for="confirm_password">Confirm Password:</label> 
        <input type="password" id="confirm_password" name="confirm_password" 
               size="20" class="required" /><br />
        <label for="email">E-Mail Address:</label> 
        <input type="text" name="email" size="30" class="required email" /><br />
        <label for="street">Street:</label> 
        <input type="text" name="street" id="street" size="50" class="required" /><br />
        <label for="city">City:</label> 
        <input type="text" name="city" id="city" size="30" class="required" /><br />
        <label for="state">State:</label> 
        <select name="state" class="required">
            <option value=""></option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
            <option value="AS">American Samoa</option>
            <option value="FM">Federated States of Micronesia</option>
            <option value="GU">Guam</option>
            <option value="MH">Marshall Islands</option> 
            <option value="MP">Northern Mariana Islands</option>
            <option value="PW">Palau</option>
            <option value="PR">Puerto Rico</option>
            <option value="VI">Virgin Islands</option>
        </select><br />
        <label for="postal_code">Zip Code:</label> 
        <input type="text" name="postal_code" id="postal_code" size="5" maxlength="5" class="required digits" /><br />
        <input type="hidden" name="MAX_FILE_SIZE" value="400000" />
        <label for="user_pic">Upload a picture:</label> 
        <input type="file" name="user_pic" size="30" /><br />
        <label for="bio">Bio:</label> 
        <textarea name="bio" cols="40" rows="10"></textarea>
      </fieldset>
      <br />
      <fieldset class="center">
        <input type="submit" value="Register" />
        <input type="reset" value="Clear and Restart" />
      </fieldset>
    </form>
  </div>

  <div id="footer"></div>
 </body>
</html>

这是 check_username.php 代码

<?php
    require_once $_SERVER['DOCUMENT_ROOT'] . '/StructuredPages/scripts/app_config.php';
    require_once $_SERVER['DOCUMENT_ROOT'] . '/StructuredPages/scripts/database_connection.php';

    $name = trim($_REQUEST['username']);
    $uname = mysql_real_escape_string($name);

    $query = "SELECT username FROM users WHERE username='$uname';";
    $res = mysql_query($query);
    if (mysql_num_rows($res) != 0)  
    {
        $output = false;
    } else {
        $output = true;
    }
    echo json_encode($output);
?>

我在 IE 中的问题是用户名验证有时有效,并且仅适用于 MySQL 数据库中的某些用户名。如果您在数据库中尝试使用用户名并且没有出现“用户名已经存在......”的消息,那么事情似乎会出现问题,并且一旦出现不同的消息,无论该字段是什么都无法验证,例如“此字段是必需的”作为 class="required" 的产物,或消息“用户名必须包含至少 4 个字符”作为 jquery 验证 minlength 规则的结果(即使已遵守该规则)。最神秘的是为什么某些用户名会匹配而其他用户名不会。似乎找到了匹配项,但某些原因导致某些用户名破坏了代码。此外,它在 Chrome 中运行良好。

4

1 回答 1

0

改变这个:

$(document).ready(function(){...})

和:

jQuery(function(){...})

解决了表单脚本中不稳定的 IE9 行为。如果您在 Internet Explorer 中使用 jQuery 进行远程验证时遇到奇怪的问题,请尝试一下。

于 2012-03-14T01:32:49.083 回答