专栏首页猿计划bootstrapValidator的使用

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

<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: '输入正整数'
 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我的天上传文件又出现问题了(超出大小限制)

    TrueDei
  • 动态规划之钢条切割问题:自低向上(Python实现)

    TrueDei
  • Datatables获取选中行的某一列的数据

    TrueDei
  • Biological Psychiatry ERP结合fMRI研究:精神分裂症(SZ)和自闭症患者(ASD)视感觉识别的模式差异

    文献导读:不同疾病在临床症状上的相同表现往往会引起研究者对其成因的探究,因为相似的临床表现可能是由于类似的神经基础导致的,而不同病理成因又会对这种相似的神经机制...

    用户1279583
  • 多值类别特征加入CTR预估模型的方法

    我们都知道一般单值类别特征加入到CTR预估模型的方法是先对单值类别特征进行one-hot,然后和embedding 矩阵相乘转换成多维稠密特征,如下图 1 所示...

    DeePR
  • 腾讯安全团队:谷歌AI学习系统有安全漏洞

    腾讯安全平台部Blade团队日前对外发布消息称,该团队在对谷歌人工智能学习系统Tensorflow进行代码审计时,发现该系统存在重大安全漏洞,利用该系统进行编辑...

    企鹅号小编
  • 基于心理学和数据驱动的方法进行游戏《LOL&王者荣耀》事件检测与亮点事件预

    最近几年人工智能已经得到了所有业界人士的关注,也得到了国家政府的大力支持,在这样美好的环境中,我们应该把重心放在创新,怎么利用现有的知识去创新的算法、框架、模型...

    计算机视觉研究院
  • 人工智能在《LOL&王者荣耀》游戏中的角色

    近期LOL和王者荣耀游戏已经充斥着真个朋友圈,但是谁又知道在火热的游戏进行中,又有一批批IT男在完成另一项重要的任务,那就是利用深度学习的知识去完成游戏直播的智...

    计算机视觉研究院
  • 九度OJ——1172哈夫曼树

    题目描述: 哈夫曼树,第一行输入一个数n,表示叶结点的个数。需要用这些叶结点生成哈夫曼树,根据哈夫曼树的概念,这些结点有权值,即weight,题目需要输出所...

    AI那点小事
  • Gatsby 博客部署到腾讯云教程

    原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/

    Avenir

扫码关注云+社区

领取腾讯云代金券