首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

Posted in Javascript onMarch 29, 2020

本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法。分享给大家供大家参考，具体如下：

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

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

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

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

引入对应的CSS和JS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" rel="external nofollow" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js"></script>

添加验证规则

使用HTML添加验证。

对某一个标签添加验证规则，需要放在<div class="form-group"></div>标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。

<div class="form-group">
  <label class="col-md-2 control-label">学号</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" />
  </div>
</div>

初始化bootstrapValidator。

<script type="text/javascript">
$('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对象 指定提交按钮的对象
  }
});
</script>

效果图。

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

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

使用JS添加验证

HTML样式代码。

<div class="form-group">
  <label class="col-md-2 control-label">姓名</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="name" />
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label">年龄</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="age" />
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label">电话</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="phoneNumber" />
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label">Email</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="email" />
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label">密码</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="pwd" />
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label">确定密码</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="pwd1" />
  </div>
</div>

JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。

<script type="text/javascript">
  $('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: '两次密码不一致'
          }
        }
      }
    }
  });
</script>

效果如下。

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

AJAX后台交互验证，验证用户名是否存在。

<div class="form-group">
  <label class="col-md-2 control-label">用户名</label>
  <div class="col-md-6">
    <input type="text" class="form-control" name="username" />
  </div>
</div>
<script type="text/javascript">
$('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: '此用户名已存在'
        }
      }
    }
  }
});
</script>

后台验证返回格式必须为{“valid”, true or false} 的json数据格式。后台verifyUsername验证判断方法。

@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;
}

效果如下。

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

下面是几个比较常见的验证规则。

  • notEmpty：非空验证；
  • stringLength：字符串长度验证；
  • regexp：正则表达式验证；
  • emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
  • base64：64位编码验证；
  • between：验证输入值必须在某一个范围值以内，比如大于10小于100；
  • creditCard：身份证验证；
  • date：日期验证；
  • ip：IP地址验证；
  • numeric：数值验证；
  • url：url验证；
  • callback：自定义验证
  • Form表单的提交

关于提交，可以直接用form表单提交即可。

<div class="form-group">
  <div class="col-md-6 col-md-offset-2">
    <button id="btn" type="submit" class="btn btn-primary">提交</button>
  </div>
</div>

也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。

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

效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

页面完整代码。

<meta charset="UTF-8">
<form action="" class="form-horizontal">
  <div class="form-group">
    <label class="col-md-2 control-label">学号</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">用户名</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="username" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">姓名</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="name" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">年龄</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="age" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">电话</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="phoneNumber" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Email</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">密码</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="pwd" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">确定密码</label>
    <div class="col-md-6">
      <input type="text" class="form-control" name="pwd1" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-6 col-md-offset-2">
      <button id="btn" type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>
 
<script type="text/javascript">
  $(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
      }
    });
  })
</script>

到这里，BootstrapValidator验证插件的方法已经写的很全面了。不足地方欢迎大家下方留言指出！

可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

- Author -

一枕江风

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
js尾调用优化的实现
May 23 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 #Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 #Javascript
JS中FormData类实现文件上传
Mar 27 #Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 #Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
开发Node CLI构建微信小程序脚手架的示例
Mar 27 #Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 #Javascript
日本购物网站(72) 瑞士购物网站(28) 印度购物网站(45) 韩国购物网站(27) 墨西哥购物网站(16) 俄罗斯购物网站(137) 德国购物网站(227) 马来西亚购物网站(41) 埃及购物网站(2) 西班牙购物网站(115)
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php 301转向实现代码
2008/09/18 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
写的htc的数据表格
2007/01/20 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
js实现弹窗效果
2020/08/09 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
让 python 命令行也可以自动补全
2014/11/30 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
竞选部长演讲稿
2014/04/26 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
安全学习心得体会范文
2016/01/18 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB