Bootstrap是一种流行的前端框架，它提供了各种组件和工具，以便在Web应用程序中构建美观且易于使用的用户界面。其中之一就是表单验证组件，可以帮助我们验证表单输入数据的合法性。
使用Bootstrap表单验证组件进行表单验证
首先，需要在HTML页面的头部引入相关的Bootstrap CSS和JavaScript文件：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
然后，在表单元素中添加data-toggle="validator"属性，这样就启用了Bootstrap表单验证组件。例如：
-- -------------------- ---- ------- ----- ----------- ------------------------ ---- ------------------- ------ -------------------------- ------ ----------- -------------------- -------------- ------------------- -------- -------------------- ---- ----------------- ------------------- ------ ---- ------------------- ------ ----------------------------- ------ ------------ -------------------- --------------- ----------------------- -------- -------------------------- ---- ----------------- ------------------- ------ ---- ------------------- ------ ------------------------------ ------ --------------- ------------------ -------------------- ------------------ --------------------------- --------- ---- ----------------- ------------------- ------ ------- ------------- ---------- ------------------------ -------展开代码
在上面的示例代码中，每个表单元素都包含了不同的验证规则。例如：
required属性表示该输入框不能为空。data-error属性指定当验证失败时显示的错误提示信息。data-minlength属性指定输入框中输入的最小字符数。
此外，还需要在页面底部添加以下JavaScript代码，以初始化Bootstrap表单验证组件：
$(document).ready(function () { $('form[data-toggle="validator"]').validator({ feedback: { success: 'glyphicon glyphicon-ok', error: 'glyphicon glyphicon-remove' } }); });
这样，就可以使用Bootstrap表单验证组件对表单进行验证了。如果输入数据不符合规则，则会出现错误提示信息，否则将显示成功提示信息。
总结
通过这个实例，我们学习了如何使用Bootstrap表单验证组件对表单进行验证。Bootstrap表单验证组件提供了很多内置的验证规则，可以方便地应用到各种场景中。我们只需按照文档中的说明，加上相应的HTML标记和JavaScript代码即可。
参考链接：Bootstrap表单验证
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1213
