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

标签 javascript css html twitter-bootstrap twitter-bootstrap-3

首先,我不是在询问使用 Bootstrap 的 javascript 指南从头开始编写工具提示,即 in the docs .

我最近使用了 type="email" 以及 v3.3.1。它会自动验证错误的电子邮件并显示很棒的工具提示。我希望用最少的代码将其扩展到自定义字段(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>

最佳答案

您可以使用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 : 它有时间和很多数据类型模式

关于javascript - 如何使用 Twitter Boootstrap 的表单验证工具提示消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30445558/

相关文章:

html - 如何将一个 div 左对齐,另一个 div 居中对齐?

javascript - 选择 HTML 的选项自动化

javascript - 在 laravel 中通过 javascript 计算价格

Javascript 私有(private)类字段或方法在 iOS Chrome 或 Safari 中不起作用

javascript - div 类(index.php)看不到 css 文件夹

html - 使用 Twitter Bootstrap 连续 4 列

css - 在具有固定位置的文本区域中输入文本会向下滚动 chrome 中的包含容器

javascript - 可视化编辑器 (TinyMCE) 上的 jQuery keyup()

javascript - Mongo 和 Node.js : Finding a document by _id using a UUID (GUID)

javascript - 为带按钮的 div 设置 InnerHTML