bootstrapvalidator 用法
1.引入js、css
2.用法
API:http://bootstrapvalidator.votintsev.ru/api/
参考博客:https://blog.csdn.net/u013938465/article/details/53507109
https://blog.csdn.net/freedom_wbs/article/details/54617741
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
- <link href="scripts/bootstrap/BootValidate/bootstrapValidator.min.css" rel="stylesheet" />
- <script src="scripts/jquery-1.10.2.min.js"></script>
- <script src="scripts/bootstrap/js/bootstrap.min.js"></script>
- <script src="scripts/bootstrap/BootValidate/bootstrapValidator.min.js"></script>
- <meta charset="utf-8" />
- </head>
- <body>
- <form onsubmit="return myvalidate()" action="/User/Create" method="post">
- <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>
- <script>
- function myvalidate() {
- $("form").bootstrapValidator('validate');//提交验证
- }
- $(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: '用户名不能为空'
- },
- stringLength: {
- min: 6,
- max: 18,
- message: '用户名长度必须在6到18位之间'
- },
- regexp: {
- regexp: /^[a-zA-Z0-9_]+$/,
- message: '用户名只能包含大写、小写、数字和下划线'
- }
- }
- },
- email: {
- validators: {
- notEmpty: {
- message: '邮箱不能为空'
- },
- emailAddress: {
- message: '邮箱地址格式有误'
- }
- }
- }
- }
- });
- });
- </script>
- </body>
- </html>
bootstrapvalidator 用法的更多相关文章
- BootstrapValidator验证表单用法
引入文件 <link rel="stylesheet" href="css/bootstrap.css"/> <link rel=" ...
- JS组件系列——Form表单验证神器: BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- BootStrap-validator 使用记录(JAVA SpringMVC实现)
BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章<使用bootstrapv ...
- Form表单验证神器: BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrap bootstrapvalidator插件+adjax验证使用
1.利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS. <link rel="stylesheet" type="text/css ...
- BootstrapValidator:表单验证神器
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
随机推荐
- spring-boot-starter-thymeleaf对没有结束符的HTML5标签解析出错
springboot 在使用thymeleaf 作为模板时,当出现未关闭标签时,如下所示代码,标签没有关闭. <link href="plugin/layui/css/layui.cs ...
- HTML笔记(适合新手入门)
HTML Web 标准构成 Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合. 主要包括结构(Structure).表现(Presentation)和行为(Behavior ...
- ICML 2018 | 从强化学习到生成模型:40篇值得一读的论文
https://blog.csdn.net/y80gDg1/article/details/81463731 感谢阅读腾讯AI Lab微信号第34篇文章.当地时间 7 月 10-15 日,第 35 届 ...
- Synchronized 和 Lock 锁在JVM中的实现原理以及代码解析
一.深入JVM锁机制:synchronized synrhronized关键字简洁.清晰.语义明确,因此即使有了Lock接口,使用的还是非常广泛.其应用层的语义是可以把任何一个非null对象作为&qu ...
- 解决Chrome与jQuery菜单兼容问题
题外,Chrome最近在耗电量方面超过了Edge,不过内存占用还是高啊,开发时偶尔用用.这不,http://jqueryui.com/menu/的官方菜单都支持的不好,改改吧! 打开jquery-ui ...
- Django 类视图
引文 所有的类视图都继承django.views.generic.base.View类. 在URLconf中简单的使用通用视图 如果只是简单的做一些属性修改,可以使用as_view()方法,如下所示: ...
- Python基于dtw实现股票预测【多线程】
# -*- coding: utf-8 -*- """ Created on Tue Dec 4 08:53:08 2018 @author: zhen "&q ...
- H5——简易马祖
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- SQL Server "允许远程连接到此服务器" 配置
在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...
- cmd是命令提示符吗?
经常使用电脑的小伙伴对cmd有所了解,它能帮我们快速解决问题.搜索框中输入“cmd”,就可以看到命令提示符程序了.那么,命令提示符程序和cmd到底有着什么样的联系呢?下面就为大家讲解一下. CMD是c ...