BootstrapValidator使用总结-程序员宅基地

技术标签: 大前端  前端  html  bootstrap  

(1)基础的字段验证

$('#form').bootstrapValidator({
    
    excluded: [":disabled"],
    message: '表单校验',
    feedbackIcons: {
    
        /*input状态样式图片*/
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
    
        code:{
    
            message: "code字段校验",
            trigger:"change",
            validators: {
    
                notEmpty: {
    
                    message: 'XX必须选择'
                }
            }
        },
        name: {
    
            message: '姓名验证',
            trigger:"change",
            validators: {
    
                notEmpty: {
    
                    message: '姓名不能为空'
                },
                regexp: {
    
                    regexp:/^[\u4e00-\u9fa5]+$/,
                    message: '只能输入汉字'
                },
                stringLength: {
    /*长度提示*/
                    max: 8,
                    message: '姓名不超过16个字符'
                }
            }
        }
	}
});
	

(2)button验证

按钮的类型为button时,bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。

    var bootstrapValidator = $("#form").data('bootstrapValidator');
    bootstrapValidator.validate();    
   if (bootstrapValidator.isValid()) {
    
	
	}

(3)自定义错误提示信息

在一些场景下,可能需要不同的输入做一些不同的文字描述提示,比如我们在验证身份证时,可能需要验证合法性,也可能会提取出生日期做一些验证,可能提取性别验证一些信息等等

updateMessage(field*, validator*, message*): BootstrapValidator —更新对应的错误提示信息

         callback: {
    
                    message: '身份证号码无效!',
                    callback: function (value, validator, $field) {
    
                        if (!value) {
    
                            return true
                        } else if (isIdCardNo(value)) {
    
                            idCardToBirth();
                            if (!checkAge()){
    
                                validator.updateMessage('idcard', 'callback', '年龄不满足要求')
                                return false;
                            }
                            return true;
                        } else {
    
                            return false;
                        }
                    }
                },

(4)多个字段关联验证

updateStatus(field*, status*, validator):
更新指定字段的验证状态

当我们在进行字段验证时,可能会遇到一个字段被其他字段所影响,在进行当前字段验证时,如果发现某一个条件则设置另一个字段为验证通过,或者为验证不通过,那么就可以通过

手动设置某个字段不通过
validator.updateStatus('字段名称', 'INVALID',validator);

手动设置某个字段不通过
validator.updateStatus('字段名称', 'VALID',validator);

在这里插入图片描述
其中validator表示会更新对应的那一个验证器比如下面的方法,设置更新familyNum字段的notEmpty验证器,那么该字段显示的提示信息就是notEmpty中设置的错误信息
validator.updateStatus(‘familyNum’, ‘INVALID’,‘notEmpty’);

(5)数字范围的验证

在这里插入图片描述

                between:{
    
                    min:1,
                    max:10,
                    message:"输入范围1~10",
                },

(6)调用接口交互验证

对于涉及到接口调用的验证,可以通过remote来处理
在这里插入图片描述

                remote:{
    
                url:"/idcard/exists",
                message: '该身份证已存在,请重新输入',
                type:'post',
                data:function(validate){
    
                    return{
    
                        idcard:$("#idcard").val()
                    }
                }
            }

接口的返回值参考:
验证通过{valid:true}
验证失败{valid:true}

官方文档

http://bootstrapvalidator.votintsev.ru/api/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Octopus21/article/details/120958379

智能推荐

hash取模_ha取-程序员宅基地

文章浏览阅读391次。这里是hadoop的mapreduce中的MapTask中的output输出的hash分区代码:package org.apache.hadoop.mapreduce.lib.partition;import org.apache.hadoop.classification.InterfaceAudience;import org.apache.hadoop.classification.InterfaceStability;import org.apache.hadoop.mapreduce._ha取

将深度学习技术应用到实际项目_深度学习移植到项目-程序员宅基地

文章浏览阅读1.5k次。https://www.toutiao.com/a6693660287913951751/本文介绍如何将基于深度学习的目标检测算法应用到具体的项目开发中,体现深度学习技术在实际生产中的价值,算是AI算法的一个落地实现。本文算法部分可以参见前面几篇博客:[AI开发]Python+Tensorflow打造自己的计算机视觉API服务[AI开发]基于深度学习的视频多目标跟踪实现[AI..._深度学习移植到项目

面向对象技术概念_面向对象技术基本概念-程序员宅基地

文章浏览阅读388次。1、对“多态”_面向对象技术基本概念

管道符,通配符,转义字符_网络语言 管道符-程序员宅基地

文章浏览阅读491次。1.管道符*作用:把前一个命令原本要输出到屏幕的标准正常数据当作是后一个命令的标准输入。格式: 命令A | 命令B。2.通配符通用的匹配信息的符号。星号 *:代表空值或无限的问号 ?:代表匹配单个字符,不包括空字符中括号 [ ]:数字、字母;中括号是不支持匹配超过两位以上的内容的,只能匹配单个字符。3.转义字符“” 保留其中的变量属性,不进行转义处理。$$ 表示..._网络语言 管道符

高等概率论 Chapter 9. Integration with Respect to a Probability Measure1_高等概率论薄立军pdf-程序员宅基地

文章浏览阅读178次。南京审计大学统计学研究生第一学期课程,《高等概率论》。_高等概率论薄立军pdf

canvas-简单快速实现知乎登录页背景效果_vue2知乎登录页面背景canvas-程序员宅基地

文章浏览阅读2.3k次。前言打开知乎的登录页,就可以看到其背景有一个动效,看起来好像蛮不错的样子:这个效果使用canvas是不难实现的,接下来就一步一步地讲解并实现这个效果。分析在动工之前先分析这个效果到底是如何运动的。首先要理解的是虽然看起来好像所有线和圆都在运动,但实际上只有圆才是在运动的,而线只不过是把满足一定条件的任意两个圆连接在一起。那么接下来就分析圆是怎么运动的,从效果看,_vue2知乎登录页面背景canvas

随便推点

vim复制指定范围行的数据到另外某处_vim 复制另一个文件的指定行到当前文件-程序员宅基地

文章浏览阅读1.1w次,点赞6次,收藏14次。使用vim打开一个文件之后,输入冒号进入末行模式输入153,167 co 172代表的意思是复制153行到167行的内容到172行。这个特别的好用,这样我们就不需要需要复制某个范围行的数据不需要数我们需要复制多少行然后再傻傻的执行 比如上例中一共15行 我们之前可能就是 15 yy 然后切换到172行在 p。..._vim 复制另一个文件的指定行到当前文件

Exception | neither user 10075 nor current process has android.permission.ACCESS_NETWORK_STATE.._neither user 10150 nor current process has android-程序员宅基地

文章浏览阅读8.3k次。neither user 10075 nor current process has android.permission.ACCESS_NETWORK_STATE..已经添加过权限仍然会抛出异常: 异常信息:Caused by: java.lang.SecurityException: ConnectivityService: Neithe_neither user 10150 nor current process has android.permission.interact_acros

dotnetcore 与 hbase 之三——c# for hbase 客户端的使用-程序员宅基地

文章浏览阅读843次。说明在上一篇文章dotnetcore 与 hbase 之二——thrift 客户端的制作中已经可以找到 c# hbase 客户端的使用方法了,为什么这里单独列出一篇文章来讲述呢?最简单的理由就是,本篇将为客户端的使用讲述一些简化性工作以及需要注意的事项。为此,我们做了一些工作HbaseNetCore。存在的差异在 c# hbase 客户端中,接口基本只接受或返回 byte 数组型的..._hbase c#

CentOS 7.0安装HBase1.3.1_yum hbase 安装-程序员宅基地

文章浏览阅读884次。环境CentOS 7hadoop 2.7.3hbase 1.3.1zookeeper 3.4.11下载HBase并上传解压下载链接:https://mirrors.tuna.tsinghua.edu.cn/apache/hbase/百度云链接:https://pan.baidu.com/s/1i4HTwVz 密码:p7k3上传已下载的hbase压缩包到/data/software 目录mkdir -_yum hbase 安装

【第11章 文件系统】_文件系统得类图-程序员宅基地

文章浏览阅读97次。文件操作是应用程序必不可少的部分。Qt 作为一个通用开发库,提供了跨平台的文件操作能力。Qt 通过QIODevice提供了对 I/O 设备的抽象,这些设备具有读写字节块的能力。下面是 I/O 设备的类图(Qt5):_文件系统得类图

三流Mayavi操作-Mayav-2.1.2-mesh、triangular_mesh绘制-程序员宅基地

文章浏览阅读5.3k次,点赞6次,收藏25次。秉着边学边写边折腾的原则,开始粗糙的工作。真正掌握还是得讲解给别人听。 先给出网课https://www.icourse163.org/course/BIT-1001871001 Mayavi官方http://docs.enthought.com/mayavi/mayavi/index.html(有时候这网站会装死,一般过几个小时就会活过来)Mayavi-2.0共有??篇,这是第3篇。..._mayavi