文档章节

bootstrapValidator form表单验证

赵作文
 赵作文
发布于 2015/09/28 17:04
字数 352
阅读 440
收藏 0

1:引入相应的css和js

      css:

      <link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

     <link href="<%=path%>/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css">


       js:

      <script src="<%=path%>/js/jquery.min.js" type="text/javascript"></script>

    <script src="<%=path%>/js/bootstrap.min.js" type="text/javascript"></script>

     <script src="<%=path%>/js/bootstrapValidator.min.js"></script>


2:相应的html代码:

<form id="formAddpic" method="post" class="form-horizontal" action="${pageContext.request.contextPath}/activity/addpic.shtml">
					<div class="form-group">
						<label for="picName" class="col-lg-3 control-label">姓名:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" id="picName" name="picName" placeholder="姓名">
						</div>
					</div>
					<div class="form-group">
						<label for="picDepartment" class="col-lg-3 control-label">部门:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" id="picDepartment" name="picDepartment" placeholder="部门">
						</div>
					</div>
					<div class="form-group">
						<label for="picPhone" class="col-lg-3 control-label">手机:</label>
						<div class="col-lg-5">
							<input type="text" class="form-control" maxLength="11" id="picPhone" name="picPhone" placeholder="手机">
						</div>
					</div>
					<div class="form-group">
						<label for="picEmail" class="col-lg-3 control-label">邮箱:</label>
						<div class="col-lg-5">
							<input type="email" class="form-control" id="picEmail" name="picEmail" placeholder="邮箱">
						</div>
					</div>
				       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-5">
            <button type="submit" id="setpicbtn" class="btn btn-primary">确认</button>
         </div>
     </div>
				</form>

  


3:js代码:

       

$(function() {
var formAddpic = $('#formAddpic');
$("#setpicbtn").bind("click", function() {
formAddpic.submit()
});
formAddpic.bootstrapValidator({
message : '输入有误',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
picName : {
validators : {
notEmpty : {
message : '负责人不能为空'
}
}
},
picDepartment : {
validators : {
notEmpty : {
message : '部门不能为空'
}
}
},
picPhone : {
validators : {
notEmpty : {
message : '手机号码 必须填写'
},
regexp : {
regexp : /^\d{11}$/,
message : '手机号码为11位数字'
}
}
},
picEmail : {
validators : {
notEmpty : {
message : '邮箱不能为空'
},
emailAddress : {
message : '不是合法的邮件'
}
}
}
}
}).on(
'success.form.bv',
function(e) {
e.preventDefault();
var $form = $(e.target);
$.post($form.attr('action'), $form.serialize(),
function(result) {
$("#addpic").modal("hide");
$("#tablePic").bootstrapTable("refresh");
}, 'json');
})
});

4:

© 著作权归作者所有

赵作文
粉丝 1
博文 23
码字总数 5827
作品 0
上海
后端工程师
私信 提问
BootstrapValidator,最好用的bootstrap表单验证插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/49101931 本篇推荐一款twitter做的BootstrapValidator,本身Bootstrap就是twitter做的,那么使用...

qing_gee
2015/10/13
0
0
表单验证(bootstrapValidator)

引入CSS文件 <link href="<%=basePath %>css/bootstrapValidator.css"/> 引入JS文件 <script type="text/javascript" src="bootstrapValidator.min.js"></script> JS验证代码,需要配合JQuer......

JUKE
2015/12/16
138
0
bootstrapvalidator之API学习

最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。 下面记录一下使用中学习到的相关API,不定期更新。 1....

哪知道
2016/05/31
0
0
表单无法重置验证,只能够清空数据,望大神帮我看下。

function vailiedForm(){ $('form:first').bootstrapValidator({ feedbackIcons : { valid : 'glyphicon glyphicon-ok', invalid : 'glyphicon glyphicon-remove', validating : 'glyphicon ......

zrc
2016/12/18
781
2
BootstrapValidator-验证插件

一、使用须知 插件下载:https://github.com/nghuuphuoc/bootstrapvalidator API:http://bootstrapvalidator.votintsev.ru/api/ 推荐:https://www.cnblogs.com/landeanfen/p/5035608.html......

刺風
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
34分钟前
3
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
9
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部