BootStrap Validator

表单验证,必须有Form表单,需要用到form-group

如果使用了 input-group 无法显示出 校验提示

<div class="input-group">
  <span class="input-group-addon">姓名</span>
  <input type="text" id="username" class="form-control" value="${username}" placeholder="姓名">
</div>

引入:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</form>

$(function () {
$(‘form‘).bootstrapValidator({

        message: ‘This value is not valid‘,
 feedbackIcons: {
        valid: ‘glyphicon glyphicon-ok‘,
        invalid: ‘glyphicon glyphicon-remove‘,
        validating: ‘glyphicon glyphicon-refresh‘
         },
fields: {
username: {
message: ‘用户名验证失败‘,
validators: {
notEmpty: {
message: ‘用户名不能为空‘
}
}
},
email: {
validators: {
notEmpty: {
message: ‘邮箱地址不能为空‘
}
}
}
}
});
});

原文地址:https://www.cnblogs.com/taiguyiba/p/11993127.html

时间: 2024-10-12 17:36:17

BootStrap Validator的相关文章

BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法

最近一直在做互金平台,做到后台提交表单的时候出现验证提交数据一直没有提交的问题.于是百度了一下.果然是版本问题造成的.幸好找到了问题所在.我一直仿照的是东钿原微信平台的做法,但是使用byond的后台框架,可能版本不一样,所以造成 submitHandler: function(validator, form, submitButton) { // 版本号0.4.5支持 // 版本号v0.5.2-dev不再支持submitHandler配置 } 这个方法一直是无效的无法执行.百度搜到就是以下解决办

bootstrap validator 使用 带代码

如何使用bootstrapVlidator插件? 下载bootstrapVlidator插件 在需要使用的页面引入bootstrapVlidator的js文件和css文件 如: 注: 在此基础之前必须引入jquery库和bootstrap的js文件和css样式. 如: 放入所需插件 引入路径 3.表单代码: <form id="registForm"> <!--下面是用户名输入框--> <div class="form-group"&g

Bootstrap Validator使用特性,动态(Dynamic)添加的input的验证问题

http://1000hz.github.io/bootstrap-validator/#validator-usage Validated fields By default, the validator will only validate fields that are present when the plugin is initialized. If your form has a dynamic set of fields, you will need to call $(...).

bootstrap validator html attributes 选项

常用的html属性:data-fv-message="The username is not valid"data-fv-notempty="true"data-fv-notempty-message="The username is required and cannot be empty"data-fv-regexp="true"data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$&q

BootStrap-validator 使用记录(JAVA SpringMVC实现)

BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章<使用bootstrapvalidator的remote验证经验> 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个一个下载到您

jQuery Raty - 不错的星级评分插件

在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求. 一.展示 二.使用教程 ①.下载插件 https://github.com/wbotelhos/raty ②.导入文件 <script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script> <link type="text/cs

我就转载下

<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/

移动端 Web 开发前端知识整理

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde

【Python 函数对象 命名空间与作用域 闭包函数 装饰器 迭代器 内置函数】

一.函数对象 函数(Function)作为程序语言中不可或缺的一部分,但函数作为第一类对象(First-Class Object)却是 Python 函数的一大特性. 那到底什么是第一类对象(First-Class Object)呢? 在 Python 中万物皆为对象,函数也不例外,函数作为对象可以赋值给一个变量.可以作为元素添加到集合对象中.可作为参数值传递给其它函数,还可以当做函数的返回值,这些特性就是第一类对象所特有的. 1.函数身为一个对象,拥有对象模型的三个通用属性:id.类型.和值.