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测试上述代码运行效果。

Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
JavaScript链式调用原理与实现方法详解
May 16 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
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
机关保密承诺书
2014/06/03 职场文书
党支部特色活动方案
2014/08/20 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
英语复习计划
2015/01/19 职场文书
公司开业致辞
2015/07/29 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书