Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法。分享给大家供大家参考,具体如下:
Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。
先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~)。
<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>
效果图。
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; }
效果如下。
关于提交,可以直接用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提交代码。
http://tools.laike.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。