如何验证我使用 bootstrap 3 创建的表单？

Posted 2023-05-08

【中文标题】如何验证我使用 bootstrap 3 创建的表单？

【英文标题】：How can I validate a form that i had created using bootstrap 3?

【发布时间】：2018-06-23 01:19:49

【问题描述】：

我想实现这一点并验证每个元素，所以没有留空：

名字 - 仅包含字符

姓氏 - 仅限字符、连字符和撇号

电子邮件 - 有效的电子邮件地址

邮政编码 - 美国邮政编码验证

美国州 - 州的下拉列表

这是我的html代码：

           <section>
          <div class="container form-container col-lg-12">
          <form class="form_data" role="form" id="needs-validation" novalidate>
         <h1 class="text-center"> Contact us </h1>
         <div class="form-group center-block">
          <label for="input--email" class="form-labels">Email address</label>
             <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="[e-mail]">
            <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
             <div class="alert-feedback">
      Please provide a valid email.
             </div>
      </div>
         <div class="form-group center-block">
          <label for="inputName" class="form-labels">name</label>
           <input type="text" name="name"  pattern="[a-zA-Z]+" class="form-control form-
                control-lg" placeholder="Norman Geller" required="true" id="input--name">
           <div class="alert-feedback">
      Please input your name.
    </div>
        </div>
       <div class="form-group center-block">
       <label for="inputZipCode" class="form-labels"> Zip code</label>
       <input type="number" min="5" max="5" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required="true" id="input--zip">
      <div class="alert-feedback">
      Please input your zip.
    </div>

【问题讨论】：

您是否研究过简单的解决方案，例如 jQuery 的 Validate 插件？ jqueryvalidation.org

别忘了 JS 验证很容易被绕过。确实方便用户，但也应该在另一端完成

如果你想要更多的控制，你可以使用正则表达式来验证每个输入，或者如果你想要快速获胜，就像 Patrick 说的，jQuery 的验证插件快速且易于使用。有很多选择。这是一个特定于引导程序的引导程序，称为引导程序 3 的引导程序验证器，github.com/1000hz/bootstrap-validator。但是 hexYeah 正中它的鼻子。验证不应该只在前端处理。

我曾尝试使用引导验证程序但无法正常工作...它说标识符错误不知道为什么... $(document).ready(function() $(".contact- form").bootstrapValidator( message : "此值无效" feedBackIcons

【参考方案1】：

我建议使用Parsley.js 进行表单验证。基本用法：

首先包括 jQuery (>= 1.8) 和 Parsley。 然后，只需使用$('form').parsley(); 将required 属性添加到将被验证的输入字段。

这是基于您的代码的fiddle。

【参考方案2】：

我相信您错误地激活了验证。使用上面的代码示例，通过 javascript 激活验证：$('#needs-validation').validator();

然后在您的 hmtl 中，将您想要的模式添加到输入中。您将需要添加样式或类以匹配引导错误。

<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" data-toggle="validator">
      <h1 class="text-center"> Contact us </h1>
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="[e-mail]" data-error="Please provide a valid email." required>
        <div class="help-block with-errors"></div>
        <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
      </div>
      <div class="form-group center-block">
        <label for="inputName" class="form-labels">name</label>
        <input type="text" name="name"  pattern="[a-zA-Z]+" data-pattern-error="Characters only." class="form-control form-
        control-lg" placeholder="Norman Geller" required id="input--name">
      <div class="help-block with-errors"></div>
      </div>
      <div class="form-group center-block">
        <label for="inputZipCode" class="form-labels"> Zip code</label>
        <input type="text" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required id="input--zip" data-bv-integer="true" pattern="^[0-9]+$" data-pattern-error="Numbers only">
      <div class="help-block with-errors"></div>
      </div>
      <button type="submit">
      submit
      </button>
    </form>
  </div>
</section>

这是jsfiddle。我没有为你写美国 zip 验证，但这里是一个开始的好地方ZIP Code (US Postal Code) validation

【讨论】：

这并不能解决问题......控制台一直说验证器（）不是一个函数......我认为问题是我没有正确加载文件但我真的不知道。我会尝试稍微改变一下，看看会发生什么……这让我很紧张。我有 2 天的时间尝试这样做：s

您的代码是否已发布在 github 或我可以查看的地方？也许看到您的代码，我可以帮助您比仅仅玩猜谜游戏更快地找到解决方案。