从表单中获取值的困难答案

【问题标题】：Difficulties with obtaining values from form从表单中获取值的困难
【发布时间】：2017-12-14 09:51:22
【问题描述】：

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

我知道有 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>

【问题讨论】：

所以您只需要验证@空格的电子邮件地址？
我只需要验证输入的每条信息是否正确，如果正确，就会收到警报（'all good'）
对于初学者来说，所有属性都需要用引号括起来，而您的表单 ID 不是。引用 jquery 例如 $("#form_email").val()
看看jQuery validation plugin，它可以帮助您以最少的代码验证所有必需的输入。无需重新发明轮子
你可以使用 type="email"，不是吗？然后你可以检查 jQuery('input:invalid') 的长度 > 或 = 0

标签： javascript jquery forms validation

【解决方案1】：

这是使用jQuery Validation Plugin 的示例。就像在您的 form 上调用 .validate(); 一样简单

<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 等其他库。该插件将所有这些聚合到一个插件中，可以跨多个页面重复使用。

【讨论】：

非常感谢您提供如此详细的代码解释。由于我已经完成了您编写并检查了文档的所有操作，因此我目前根本无法收到错误消息。任何可能出错的提示？
@NikolaStoilov 当然，您可以在任何地方调用它，只要它包含在 $(document).ready() 函数中并包含在 <script> 标记中。或者你可以将你所有的 JS 放在一个外部文件中，并在你的每个 html 页面上包含对它的引用，id 建议代码重用。
再次感谢，但我目前只是将其作为一种爱好。如果我错了，请纠正我，但是：在我把
一般的概念是它应该在<head>标签中包含在<script>标签中，但也可以添加到<body>标签底部。我会更新答案以使其更有意义
我也在尝试在表单下方制作透明背景色，以便在我申请 css 时文本和的背景图像之间存在对比：form { background-color: white; opacity: 0.3; }当我这样做时，它也会使输入和文本的不透明度为 0.3。任何想法？ ://