一、页面引用插件介绍
一个比较详细的规则介绍的中文网站：
1、CSS插件
<link rel="stylesheet" href="plug-in/survey/css/bootstrap/bootstrap-3.3.7.css" /> <!-- bootstrapValidator是一个基于bootstrap的表单验证组件 --> <link rel="stylesheet" href="plug-in/survey/dist/css/bootstrapValidator.css"/>
2、JS插件
<script type="text/javascript" src="plug-in/survey/js/jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="plug-in/survey/js/bootstrap/bootstrap-3.3.7.js"></script> <script src="plug-in/ace/datatables/dataTables.bootstrap.min.js"></script> <!-- 表单验证组件 --> <script type="text/javascript" src="plug-in/survey/dist/js/bootstrapValidator.js"></script>
二、通用方法介绍
注意：使用bootstrapValidator插件时，需要验证的数据，如：input类型的。必须由：form-group包裹，不然是无法验证的。
例如：这个格式是固定的
1、html书写格式
<--这种弄写法是不适用summit按钮提交数据，默认的form表单是使用input类型为sumbit的按钮提交的。因为需要ajax请求，所以禁止使用submit方式提交。然后手动触发验证，在提交 --> <form id="zhform" onsubmit="return false" action="##" class="form-horizontal" > <--都要被 <div class="form-group" > </div> 包裹起来 不然是没有提示图标的效果 --> <div class="form-group" > <--必须有name值，因为它是通过name值来验证的。--> <input type="text" class="number" id="username" name="username" /> </div> </form>
2、表单验证函数格式
/* 表单验证 */ function formValidator() { //#zhform 是一个from表单的id值 $('#zhform').bootstrapValidator({ //live: 'disabled', //验证方式，注释掉后三种都会生效 container: '#messages', //在哪个地方显示提示语 message: '验证未通过', //通用提示语 feedbackIcons: { //提示图标 valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 要验证的名字(必须为input的name值): { validators: { notEmpty: { //不能为空 message: "经纬度不能为空！" //提示消息 }, digits: { //只能是数字 message: "经纬度只能为数字！" }, between: { //控制在多少多少之间 min: -90, max: 90, message: '经度范围必须在： -90.0 和 90.0之间' } } } .... ... ... //更多规则请百度 } }) }
2、初始化
$(function() { ... //初始化表单验证规则 formValidator(); ... });
三、绕坑必备
1、一个只允许输入整数或者小数的input框。不能使用type=number，必须改为text才行（不然会一直验证不成功）。然后使用正则
regexp: { //使用正则 regexp: /^[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?$/, //验证是不是数字 message: '请输入整数或者小数' }
2、
四、常用正则
1、验证是不是正整数
regexp: { //使用正则 regexp: /^[1-9]\d*$/, //验证是不是正整数 message: '输入整数' }
2、验证是不是数字（整数、小数）
regexp: { //使用正则 regexp: /^[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?$/, //验证是不是数字 message: '输入整数或者小数' }
3、验证正整数
regexp: { //使用正则 regexp: /^\d+$/, //验证是不是正整数 message: '输入正整数' }
