Bootstrap中表单验证插件BootstrapValidator怎么用

小编给大家分享一下Bootstrap中表单验证插件BootstrapValidator怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

公司主营业务：成都网站设计、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出日照免费做网站回馈大家。

Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。

先来看一下效果图（样式是不是还不错O(∩_∩)O哈哈~）。

Bootstrapvalidator下载地址：https://github.com/nghuuphuoc/bootstrapvalidator/?

引入对应的CSS和JS

添加验证规则

使用HTML添加验证。

对某一个标签添加验证规则，需要放在

标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。


  学号

初始化bootstrapValidator。


$('form').bootstrapValidator({
  //默认提示
  message: 'This value is not valid',
  // 表单框里右侧的icon
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  submitHandler: function (validator, form, submitButton) {
    // 表单提交成功时会调用此方法
    // validator: 表单验证实例对象
    // form jq对象 指定表单对象
    // submitButton jq对象 指定提交按钮的对象
  }
});

效果图。

Bootstrap中表单验证插件BootstrapValidator怎么用

使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。

使用JS添加验证

HTML样式代码。


  姓名

$('form').bootstrapValidator({ //默认提示 message: 'This value is not valid', // 表单框里右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表单提交成功时会调用此方法 // validator: 表单验证实例对象 // form jq对象指定表单对象 // submitButton jq对象指定提交按钮的对象 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { //不能为空 message: '用户名不能为空' }, remote: { //后台验证，比如查询用户名是否存在 url: 'student/verifyUsername', message: '此用户名已存在' } } }, name: { message: '姓名验证失败', validators: { notEmpty: { message: '姓名不能为空' } } }, age: { message: '年龄验证失败', validators: { notEmpty: { message: '年龄不能为空' }, numeric: { message: '请填写数字' } } }, phoneNumber: { message: '电话号验证失败', validators: { notEmpty: { message: '电话号不能为空' }, regexp: { //正则验证 regexp: /^1\d{10}$/, message: '请输入正确的电话号' } } }, email: { message: 'Email验证失败', validators: { notEmpty: { message: 'Email不能为空' }, emailAddress: { //验证email地址 message: '不是正确的email地址' } } }, pwd: { notEmpty: { message: '密码不能为空' }, stringLength: { //检测长度 min: 4, max: 15, message: '用户名需要在4~15个字符' } }, pwd1: { message: '密码验证失败', validators: { notEmpty: { message: '密码不能为空' }, identical: { //与指定控件内容比较是否相同，比如两次密码不一致 field: 'pwd',//指定控件name message: '两次密码不一致' } } } } });

@RequestMapping(value="/verifyUsername") @ResponseBody public Map verifyUsername(String username){ Student stu = studentService.findByUsername(username); Map map = new HashMap(); if (stu == null) { map.put("valid", true); }else{ map.put("valid", false); } return map; }

$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证 $("form").bootstrapValidator('validate'); //提交验证 if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码 alert("yes"); //验证成功后的操作，如ajax } });

学号

用户名

姓名

年龄

电话

密码

确定密码

提交 $(function () { $('form').bootstrapValidator({ //默认提示 message: 'This value is not valid', // 表单框里右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表单提交成功时会调用此方法 // validator: 表单验证实例对象 // form jq对象指定表单对象 // submitButton jq对象指定提交按钮的对象 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { //不能为空 message: '用户名不能为空' }, remote: { //后台验证，比如查询用户名是否存在 url: 'student/verifyUsername', message: '此用户名已存在' } } }, name: { message: '姓名验证失败', validators: { notEmpty: { message: '姓名不能为空' } } }, age: { message: '年龄验证失败', validators: { notEmpty: { message: '年龄不能为空' }, numeric: { message: '请填写数字' } } }, phoneNumber: { message: '电话号验证失败', validators: { notEmpty: { message: '电话号不能为空' }, regexp: { //正则验证 regexp: /^1\d{10}$/, message: '请输入正确的电话号' } } }, email: { message: 'Email验证失败', validators: { notEmpty: { message: 'Email不能为空' }, emailAddress: { //验证email地址 message: '不是正确的email地址' } } }, pwd: { notEmpty: { message: '密码不能为空' }, stringLength: { //检测长度 min: 4, max: 15, message: '用户名需要在4~15个字符' } }, pwd1: { message: '密码验证失败', validators: { notEmpty: { message: '密码不能为空' }, identical: { //与指定控件内容比较是否相同，比如两次密码不一致 field: 'pwd',//指定控件name message: '两次密码不一致' } } } } }); $("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证 $("form").bootstrapValidator('validate'); //提交验证 if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码 alert("yes"); //验证成功后的操作，如ajax } }); })

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

以上是“Bootstrap中表单验证插件BootstrapValidator怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

http://cqcxhl.cn/article/giopos.html

重庆分公司，新征程启航

Bootstrap中表单验证插件BootstrapValidator怎么用

Bootstrap是什么

其他资讯