BootStrapValidator校验方式

做输入校验的时候如果你前端框架用的是bootstrap的话，首推bootstrapValidator校验方式，具体流程如下：

一、下载，导入js文件

<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
<script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>

二、

$(表单id：)（{
  message：'这里写默认提示信息';
  feedbackIcons:{
          valid:'glyphicon glyphicon-ok',
          invalid:'glyphicon glyphicon-remove',
          validating:'glyphicon glyphicon-refresh'
        },
   fields: {
            inputName: {
            validators: {
              notEmpty: {
                message: '时间不能为空'
              },
              regexp: {
                 regexp: /^[0-9]+$/ ,
                 message: '时间由数字组成'
               },
                 stringLength: {
                min: 1,
                max: 20,
                message: '角色名长度必须在1到20之间'
              }
          }
      }
   }
   ）

网上有各种验证，当然有自定义验证，如上例中的时间由数字组成。

以上所述是小编给大家介绍的BootStrapValidator校验方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

  • 基于Bootstrap+jQuery.validate实现表单验证

    基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

  • bootstrap使用validate实现简单校验功能

    本文实例为大家分享了bootstrap validate校验功能,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

    jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

    类似的文章已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jquery.validate.unobtrusive.requirejs.Bootstrap,都是当前最/较新版本.jquery.validate就不用说了,目前比较流行的前端校验组件:jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc

  • BootStrapValidator校验方式

    做输入校验的时候如果你前端框架用的是bootstrap的话,首推bootstrapValidator校验方式,具体流程如下: 一.下载,导入js文件 <link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" /> <script type="text/javascript&quo

  • Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

    1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true&q

  • springboot使用Validator校验方式

    我相信每个做开发的都听过这句"永远不要相信用户的输入",因此后台需要对用户的每个输入项都做校验:手机号.用户名.密码.邮箱.身份证号······这时候就需要hibernate-Validator校验框架登场了,下面介绍springboot如何使用hibernate-Validator进行校验. 引入pom WAIT ~~~ starter-web的依赖 惊不惊喜,意不意外?springboot已帮我们集成了,我们只管拿!来!用! 添加注解 @NotBlank(message = &qu

  • java开发之基于Validator接口的SpringMVC数据校验方式

    Spring MVC 提供了两种数据校验的方式: 1.基于 Validator 接口. 2.使用 Annotation JSR - 303 标准进行校验. 基于 Validator 接口的⽅式需要自定义 Validator 验证器,每⼀条数据的验证规则需要开发者⼿动完成, 使⽤ Annotation JSR - 303 标准则不需要⾃定义验证器,通过注解的方式可以直接在实体类中添加每个属性的验证规则,这种方式更加方便,实际开发中推荐使用. 1.定义实体类Account package entit

  • .NET Core中简单的邮箱格式校验方式

    目录 Intro Implement More References 总结 Intro 前段时间有一个验证邮箱格式的小需求,然后突然发现了一种非常简单的邮箱格式判断方式 Implement 直接来看实现 public static bool IsEmailAddress(string email) {     if (string.IsNullOrWhiteSpace(email))         return false;     var symbolIndex = email.IndexO

  • springboot使用hibernate validator校验方式

    一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要看哪些参数验证是否完整,需要去翻阅验证逻辑代码 hibernate validator(官方文档)提供了一套比较完善.便捷的验证实现方式. spring-boot-starter-web包里面有hibernate-validator包,不需要引用hibernate validator依赖. 二.hi

  • 使用自定义注解+springAop实现参数非空校验方式

    使用自定义注解+springAop实现参数非空校验方式

    目录 自定义注解+springAop参数非空校验 新建注解类@interface ParamsVerify 利用springAop来实现切面 新建一个切面类 使用注解统一校验参数非空 1. 待校验类 2. 注解类 3. 校验 自定义注解+springAop参数非空校验 自定义注解,来对对应的方法进行入参校验,为空返回参数错误 新建注解类@interface ParamsVerify @Target(ElementType.METHOD)//枚举,表示注解可能出现在的地方 @Retention(R

  • 使用@Valid+BindingResult进行controller参数校验方式

    使用@Valid+BindingResult进行controller参数校验方式

    目录 @Valid+BindingResult进行controller参数校验 Controller层方法的参数校验 全局统一异常拦截器 @Valid+BindingResult进行controller参数校验 由于controller是调用的第一层,经常参数校验将在这里完成,常见有非空校验.类型校验等,常见写法为以下伪代码: public void round(Object a){ if(a.getLogin() == null){ return "手机号不能为空!"; } } 但是

  • vue中输入框事件的使用及数值校验方式

    目录 vue输入框事件使用及数值校验 一.@input(或者是v-on:input) 二.@change 三.@keyup.enter 四.@blur(失焦) 提示和注释 vue中常用表单校验规则整理 这里整理了一些高频率用到的校验方法 vue输入框事件使用及数值校验 最近做项目,用到vue去监听输入框当中值,并且去校验值的正确性, 我们都知道 vue 当中 主要监听输入框的方法有四个:input  change blur  keyup.enter 他们都可以使用@+xxxx="在vue当中定义

  • vue两个输入框联动校验方式(最大值-最小值)

    目录 vue两个输入框联动校验 vue表单中范围两个输入框共用一个验证 vue两个输入框联动校验 如下图, 1.满足最大值和最小值的输入要求[1-100的整数] 2.满足最小值不能大于等于最大值 3.当最小值有报红校验,改正最大值使得最大值大于最小值,最小值的报红校验消失 html代码 最大值: <el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5

随机推荐