Question

首先，我不是要求使用Bootstrap的javascript指南从头开始编写工具提示in the docs。

我最近使用了type="email"以及v3.3.1。它会自动验证并显示错误email的令人敬畏的工具提示。我希望用最少量的代码将其扩展到自定义字段（type="text"等）。看看Bootstrap的文档，我没有找到任何这样的文档。

我想知道我可以使用类似于formvalidation.io的东西进行验证，而无需编写大量的javascript并结合上述工具提示样式。

我可以使用javascript，但如果有更好的方法，我想知道。

现在，我的form非常简单，没有工具提示Javascript，这有效：

<form ng-submit="submit()">
    <!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
    </div>
</form>

Answer 1

您可以使用pattern

更改/编辑工具提示的消息

 <input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
    onchange="try{setCustomValidity('')}catch(e){}" />

Good Link on patterns right here：它有时间和很多数据类型模式

Answer 2

如果你使用type =＆＃34; email＆＃34;您看到的工具提示是由浏览器生成的。

如何使用Twitter Boootstrap的表单验证工具提示消息？

2 个答案: