Question

初级开发者在这里。我正在尝试实现以下代码，以便获取表单中输入的所有信息并接收警报消息（“一切正常”）。

我知道有Jquery valid（）函数，但我也很难实现它。所以如果文本框不符合发布错误消息的要求（电子邮件需要“@”，网站需要） “www。”，名称6个字母，密码=“****”。

任何人都可以用简单的代码向我解释如何实现这个目标？

<form id=registration_form action="" method="post">
    <table>
        <tr>
            <td>Chose Username: </td>
            <td>
                <input type="text" class="form_text" id="form_username">
            </td>
            <td>
                <span class="error_form" id="username_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Password: </td>
            <td>
                <input type="password" class="form_text" id="form_password">
            </td>
            <td>
                <span class="error_form" id="password_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Retype Password: </td>
            <td>
                <input type="password" class="form_text" id="form_retype_password">
            </td>
            <td>
                <span class="error_form" id="retype_password_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Email: </td>
            <td>
                <input type="text" class="form_text" id="form_email">
            </td>
            <td>
                <span class="error_form" id="email_error_message"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" class="sbmt_btn" value="Create Account">
            </td>
            <td></td>
        </tr>
    </table>
</form>

Answer 1

以下是使用jQuery Validation Plugin的示例。就像在.validate();

上调用form一样简单

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
  <script type="text/javascript">
      $("#commentForm").validate();
  </script>
</head>

它涵盖电子邮件，所需的输入验证等等。查看文档here。

此外，如果所有字段都已正确验证，则可以使用插件的submitHandler选项在提交时设置回调。在下面的示例中，我们使用此代码调用alert()，并显示消息'Everythings Ok'。

实施例

$(document).ready(function() {
  $("#commentForm").validate({
    //we can use the handler to check if form is correctly validated
    submitHandler: function(form) {
      alert('Everythings Ok');
    }
  });
});

input[class="error"], textarea[class="error"] {
  border: 1px solid #f00 !important;
}

.error{
  margin: 5px;
  color: #f00 !important;
}

/* To cover your additional requirement mentioned in the comments */
body { 
 background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center; 
}

/* For your additional requirement */
form {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

使用jQuery执行此操作需要许多不同的验证技术，包括其他库，如Regex。该插件将所有插件聚合为一个插件，可以在多个页面中重复使用。

从表格中获取价值的困难

1 个答案:

实施例