bootstrapValidator的使用

一、页面引用插件介绍

一个比较详细的规则介绍的中文网站：

https://mrbird.cc/BootstrapValidator指南.html

https://www.zhuangyan.cn/BootstrapValidator-guide/

验证规则常用的正则表达式:

https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

https://blog.csdn.net/IMW_MG/article/details/78705359

可以匹配整数和小数的正则

https://www.cnblogs.com/ZHF/archive/2012/06/26/2564009.html

1、CSS插件

代码语言：javascript复制

<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插件

代码语言：javascript复制

 <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书写格式

代码语言：javascript复制

<--这种弄写法是不适用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、表单验证函数格式

代码语言：javascript复制

/* 表单验证 */
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、初始化

代码语言：javascript复制

$(function() {
    ...

    //初始化表单验证规则
    formValidator();

    ...
});

三、绕坑必备

1、一个只允许输入整数或者小数的input框。不能使用type=number，必须改为text才行（不然会一直验证不成功）。然后使用正则

代码语言：javascript复制

regexp: { //使用正则
    regexp: /^[ -]?([0-9]*.?[0-9] |[0-9] .?[0-9]*)([eE][ -]?[0-9] )?$/, //验证是不是数字
    message: '请输入整数或者小数'
}

2、

四、常用正则

1、验证是不是正整数

代码语言：javascript复制

regexp: { //使用正则
    regexp: /^[1-9]d*$/, //验证是不是正整数
    message: '输入整数'
}

2、验证是不是数字（整数、小数）

代码语言：javascript复制

 regexp: { //使用正则
     regexp: /^[ -]?([0-9]*.?[0-9] |[0-9] .?[0-9]*)([eE][ -]?[0-9] )?$/, //验证是不是数字
     message: '输入整数或者小数'
 }

3、验证正整数

代码语言：javascript复制

 regexp: { //使用正则
     regexp: /^d $/, //验证是不是正整数
     message: '输入正整数'
 }

https 网络安全 bootstrap html

0 人点赞