jQuery开源组件BootstrapValidator使用详解
更新时间:2017年06月29日 15:14:51 作者:北冥冰皇
这篇文章主要为大家详细介绍了jQuery开源组件BootstrapValidator的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了BootstrapValidator使用方法,供大家参考,具体内容如下
github:https://github.com/nghuuphuoc/bootstrapvalidator
参考博客:JS组件系列——Form表单验证神器: BootstrapValidator
表单HTML,如下:
<form role="form" id="roleForm"> <div class="box-body"> <div class="form-group"> <input type="text" class="form-control" id="inputRoleName" name="roleName" placeholder="角色名称" /> </div> <div class="form-group"> <input type="text" class="form-control" id="inputRoleDescribe" name="roleDescribe" placeholder="角色描述" /> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectRoleType"> </select> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectUseFlag"> <option selected="selected" value='Y'>可用</option> <option value='N'>不可用</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" id="inputDisplaySn" name="displaySn" placeholder="显示序号" /> </div> </div> </form>
js代码如下:
function initForm(){ $('#roleForm').bootstrapValidator({ fields : { roleName : { validators : { notEmpty : { message : '角色名称不能为空' }, stringLength : { min : 1, max : 16, message : '角色名称长度必须在1到16位之间' }, regexp : { regexp : /^[^&@#/"']*$/, message : '角色名称不能包含&@#/\"\'等字符' } } }, roleDescribe : { validators : { notEmpty : { message : '角色描述不能为空' }, stringLength : { min : 1, max : 64, message : '角色描述长度必须在1到64位之间' }, regexp : { regexp : /^[^&@#/"']*$/, message : '角色名称不能包含&@#/\"\'等字符' } } } } }); }
保存前验证代码如下:
function save_click() { $('#roleForm').bootstrapValidator('validate'); var valid = $('#roleForm').data('bootstrapValidator').isValid(); if(!valid){return;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JS组件Form表单验证神器BootstrapValidator
- 基于jQuery 实现bootstrapValidator下的全局验证
- 实用又漂亮的BootstrapValidator表单验证插件
- BootstrapValidator超详细教程(推荐)
- Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
- BootStrap Validator使用注意事项(必看篇)
- jquery插件bootstrapValidator数据验证详解
- Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
- jquery插件bootstrapValidator表单验证详解
- 使用bootstrap validator的remote验证代码经验分享(推荐)
相关文章
jquery EasyUI的formatter格式化函数代码
以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。2011-01-01jQuery中的read和JavaScript中的onload函数的区别
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下2014-08-08
最新评论