Question

我想通过仅使用引导程序来验证电子邮件输入，该电子邮件输入具有正确的格式以及对名字和密码的最小长度验证。

在这里，我已经完成了对输入的必填字段验证，但是我不知道如何添加电子邮件和最小长度验证。

参考：http://getbootstrap.com/docs/4.0/components/forms/?#validation

HTML

 <div class="form-group col-6">
            <label for="validationCustom01">First name</label>
            <input type="text" class="form-control" minlength="4" id="validationCustom01" placeholder="First name" required>
            <div class="invalid-feedback">
              * First name is required
            </div>
          </div>
          <div class="form-group col-6">
            <label for="validationCustom02">Last name</label>
            <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" required>
            <div class="invalid-feedback">
              * Last name is required
            </div>
          </div>
          <div class="form-group col-6">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" placeholder="Email" required>
            <div class="invalid-feedback">
              * Email is required
            </div>
          </div>
          <div class="form-group col-6">
            <label for="validationCustom03">Password</label>
            <input type="text" class="form-control" minlength="5" id="validationCustom03" placeholder="Password" required>
            <div class="invalid-feedback">
              * Password is required
            </div>
          </div>

Answer 1

您必须使用JS验证（以及服务器端验证）。 HTML验证可在所有浏览器中轻松编辑。在HTML中，您可以使用HTML5中的模式，例如<input pattern=".{8,20}"> 这是支票的长度，从8个字符到20个字符。

Answer 2

您只能在引导程序中添加验证 form-controls 类，无论该类是否为空。

在 JavaScript 上进行操作将对此有所帮助。

一个简短的代码段，用于将span / div等中的字符数限制为特定值。此功能还包括一个稍微整洁的…在截止点：-

<script type="text/javascript">// <![CDATA[
$(function(){
  $(".your-div").each(function(i){
    len=$(this).text().length;
    if(len>80)
    {
      $(this).text($(this).text().substr(0,80)+'...');
    }
  });
});
// ]]></script>

参考：Limit number of Characters in Div with jQuery or CSS

如何验证电子邮件和最小长度验证

2 个答案: