BootstrapValidator使用

最新推荐文章于 2024-08-17 01:00:00 发布
最新推荐文章于 2024-08-17 01:00:00 发布
阅读量650 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35348457/article/details/80444298
版权 
$(function() {
	to_page(1);
	addFormValidator();
	updateFormValidator();
});

$('#addModal').on('hidden.bs.modal', function() {
	$("#addform").data('bootstrapValidator').destroy();
	$('#addform').data('bootstrapValidator', null);
	$('#addform input').val("");
	$("input[name='position']").attr("checked", false);
	addFormValidator();
});
$('#updateModal').on('hidden.bs.modal', function() {
	$("#updateform").data('bootstrapValidator').destroy();
	$('#updateform').data('bootstrapValidator', null);
	$("#up_image").val("");
	updateFormValidator();
});
function addFormValidator() {
	$('#addform')
			.bootstrapValidator(
					{
						message : 'This value is not valid',
						feedbackIcons : {
							valid : 'glyphicon glyphicon-ok',
							invalid : 'glyphicon glyphicon-remove',
							validating : 'glyphicon glyphicon-refresh'
						},
						fields : {
							add_seNum : {
								validators : {
									notEmpty : {
										message : '序列号不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '序列号长度必须在1~10之间'
									},
									regexp : {
										regexp : /^[0-9]*$/,
										message : '序列号只能输入数字'
									}
								}
							},
							add_image : {
								validators : {
									notEmpty : {
										message : '请选择照片'
									},
									file : {
										extension : 'png,jpg,jpeg',
										type : 'image/png,image/jpg,image/jpeg',
										message : '上传文件不符合要求'
									}
								}

							},
							add_link : {
								validators : {
									notEmpty : {
										message : '图片链接不能为空'
									},
									stringLength : {
										min : 1,
										max : 100,
										message : '图片链接长度必须在1~100之间'
									},
									regexp : {
										regexp : /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/,
										message : '图片链接格式不符合要求'
									}
								}
							},
							add_color : {
								validators : {
									notEmpty : {
										message : '背景颜色不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '背景颜色长度必须在1~10之间'
									}
								}
							},
							add_openWith : {
								validators : {
									notEmpty : {
										message : '打开宽度不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '打开宽度长度必须在1~10之间'
									},
									regexp : {
										regexp : /^[0-9]*$/,
										message : '序列号只能输入数字'
									}
								}
							},
							position : {
								validators : {
									notEmpty : {
										message : '图片位置不能为空'
									}
								}
							}
						}
					});
	$("#add").click(function() {
		$("#addform").bootstrapValidator('validate');
		if ($("#addform").data('bootstrapValidator').isValid()) {
			var add_position = $("input[name='position']:checked").val();
			$("#addModal").modal('hide');
			var pageNum = $("#pageNum").html();
			var formData = new FormData($("#addform")[0]);
			formData.append("type", "0");
			formData.append("sourceUrl", YM());
			$.ajax({
				url : "/portal/adver/insertAdever",
				data : formData,
				datatype : "json",
				type : "post",
				async : false,
				cache : false,
				contentType : false,
				processData : false,
				success : function(result) {
					$("#div1").html(result);
					$("#publicModel").modal('show');
					setTimeout("hide()", 1000);
					to_page(pageNum);
				},
				error : function() {
					$("#div1").html("添加失败");
					$("#publicModel").modal('show');
					setTimeout("hide()", 1000)
				}
			});
		}
	});
}
function updateFormValidator() {
	$('#updateform')
			.bootstrapValidator(
					{
						message : 'This value is not valid',
						feedbackIcons : {
							valid : 'glyphicon glyphicon-ok',
							invalid : 'glyphicon glyphicon-remove',
							validating : 'glyphicon glyphicon-refresh'
						},
						fields : {
							up_seNum : {
								validators : {
									notEmpty : {
										message : '序列号不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '序列号长度必须在1~10之间'
									},
									regexp : {
										regexp : /^[0-9]*$/,
										message : '序列号只能输入数字'
									}
								}
							},
							up_image : {
								validators : {
									notEmpty : {
										message : '请选择照片'
									},
									file : {
										extension : 'png,jpg,jpeg',
										type : 'image/png,image/jpg,image/jpeg',
										message : '上传文件不符合要求'
									}
								}

							},
							up_link : {
								validators : {
									notEmpty : {
										message : '图片链接不能为空'
									},
									stringLength : {
										min : 1,
										max : 100,
										message : '图片链接长度必须在1~100之间'
									},
									regexp : {
										regexp : /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/,
										message : '图片链接格式不符合要求'
									}
								}
							},
							up_color : {
								validators : {
									notEmpty : {
										message : '背景颜色不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '背景颜色长度必须在1~10之间'
									}
								}
							},
							up_openWith : {
								validators : {
									notEmpty : {
										message : '打开宽度不能为空'
									},
									stringLength : {
										min : 1,
										max : 10,
										message : '打开宽度长度必须在1~10之间'
									},
									regexp : {
										regexp : /^[0-9]*$/,
										message : '打开宽度只能输入数字'
									}
								}
							},
							upposition : {
								validators : {
									notEmpty : {
										message : '图片位置不能为空'
									}
								}
							}
						}
					});
	$("#update").click(function() {
		$("#updateform").bootstrapValidator('validate');
		if ($("#updateform").data('bootstrapValidator').isValid()) {
			$("#updateModal").modal('hide');
			var pageNum = $("#pageNum").html();
			var formData = new FormData($("#updateform")[0]);
			formData.append("uuid", updateId);
			$.ajax({
				url : "/portal/adver/updateAdver",
				data : formData,
				datatype : "json",
				type : "post",
				async : false,
				cache : false,
				contentType : false,
				processData : false,
				success : function(result) {
					$("#div1").html(result);
					$("#publicModel").modal('show');
					setTimeout("hide()", 1000)
					to_page(pageNum);
				},
				error : function() {
					$("#div1").html("修改失败");
					$("#publicModel").modal('show');
					setTimeout("hide()", 1000)
				}
			});
		}
	});
}
function checkAll(checkall) {
	arr = document.getElementsByName('info');
	if (checkall.checked == true) {
		for (i = 0; i < arr.length; i++) {
			arr[i].checked = true;
		}

	} else {
		for (i = 0; i < arr.length; i++) {
			if ((arr[i]).checked == false) {
				arr[i].checked = true;
			} else {
				arr[i].checked = false;
			}
		}
	}
}
function to_page(pn) {
	var pageSize = $("#pageSize option:selected").val();
	var data = {
		num : 2,
		startnum : 1,
		elem : $('#page1'),
		callback : function(n) {
			to_page(n);
		}
	};
	$.ajax({
		url : "/portal/adver/getAdvers",
		data : {
			"pageNum" : pn,
			"pageSize" : pageSize,
		},
		datatype : "json",
		type : "post",
		success : function(result) {
			$("#pageNum").html(pn);
			$("#totalpage").html(result.totalPage);
			$("#totalrecord").html(result.total);
			var total = parseInt(result.totalPage);
			if (total <= 1) {
				$("#goDiv").hide();
			}
			build_table(result.advers);
			data.startnum = pn;
			data.num = result.totalPage;
			Page(data);
		},
		error : function() {
			$("#div1").html("加载数据失败");
			$("#publicModel").modal('show');
			setTimeout("hide()", 1000)
		}

	});
}

function build_table(result) {
	// 清空table表格
	$("#initTable tbody").empty();
	$.each(result, function(index, item) {

		var checkBox = $("<td></td>").append(
				"<label class='fancy-checkbox'>"
						+ "<input type='checkbox' value=' " + item.id
						+ " ' name='info' ><span></span></label>")
		var sequenceNumber = $("<td></td>").append(item.sequenceNumber);
		var image = $("<td></td>").append(item.image);
		var linkText = item.link;
		if (linkText.length > 20) {
			var link = $("<td></td>").append(
					"<a href=' " + item.link + "' target='_Blank'>"
							+ linkText.substring(0, 20) + "...</a>");
		} else {
			var link = $("<td></td>").append(
					"<a href=' " + item.link + "' target='_Blank'>" + item.link
							+ "</a>");
		}
		var backgroundColor = $("<td></td>").append(item.backgroundColor);
		var openWith = $("<td></td>").append(item.openWith);
		var po = item.position;
		if (po == 0) {
			var position = $("<td></td>").append("头部区域");
		} else {
			var position = $("<td></td>").append("主要内容区域");
		}
		var editBtn = $("<button></button>").addClass(
				"btn btn-primary btn-sm edit_btn").append(
				$("<i></i>").addClass("lnr lnr-pencil")).append("编辑");
		editBtn.attr("data-toggle", "modal");
		editBtn.attr("data-target", "#updateModal");
		editBtn.attr("edit-id", item.id);

		var delBtn = $("<button></button>").addClass(
				"btn btn-danger btn-sm delete_btn").append(
				$("<i></i>").addClass("lnr lnr-trash")).append("删除");
		// 为删除按钮添加一个自定义的属性来表示当前删除的员工id
		delBtn.attr("data-toggle", "modal");
		delBtn.attr("data-target", "#deleteModel");
		delBtn.attr("del-id", item.id);
		var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
		$("<tr></tr>").append(checkBox).append(sequenceNumber).append(image)
				.append(link).append(backgroundColor).append(openWith).append(
						position).append(btnTd).appendTo("#initTable tbody");
	});
}
$("#first").click(function() {
	to_page(1);
	$("#pageNum").html(1);
});
$("#pre").click(function() {
	var pageNum = parseInt($("#pageNum").html());
	var totalpage = parseInt($("#totalpage").html());

	if (pageNum <= 1) {
		$("#pageNum").html(1);
		to_page(1);
	} else {
		$("#pageNum").html(pageNum - 1);
		to_page(pageNum - 1);
	}

});
$("#next").click(function() {
	var pageNum = parseInt($("#pageNum").html());
	var totalpage = parseInt($("#totalpage").html());
	if (pageNum >= totalpage) {
		$("#pageNum").html(totalpage);
		to_page(totalpage);
	} else {
		$("#pageNum").html(pageNum + 1);
		to_page(pageNum + 1);
	}
});
$("#end").click(function() {
	var totalpage = parseInt($("#totalpage").html());
	$("#pageNum").html(totalpage);
	to_page(totalpage);
});
$("#check").click(function() {
	to_page(1);
});
$("#goSure").click(function() {
	var goPage = parseInt($("#goPage").val());
	to_page(goPage);
});

$(document).on("click", ".edit_btn", function() {
	window.updateId = $(this).attr("edit-id");
	$.ajax({
		url : "/portal/adver/getAdver",
		data : {
			"id" : updateId
		},
		datatype : "json",
		type : "post",
		success : function(result) {
			$("#up_seNum").val(result.sequenceNumber);
			/* $("#up_image").val(result.image); */
			$("#up_link").val(result.link);
			$("#up_color").val(result.backgroundColor);
			$("#up_openWith").val(result.openWith);
			var po = result.position;
			if (po == "0") {
				$("input[name='upposition'][value='0']").prop("checked", true);

			} else if (po == "1") {
				$("input[name='upposition'][value='1']").prop("checked", true);

			}
		},
		error : function() {
			$("#div1").html("获取信息失败");
			$("#publicModel").modal('show');
			setTimeout("hide()", 1000)
		}
	});
});


$(document).on("click", ".delete_btn", function() {
	window.deleteId = $(this).attr("del-id");
});
$("#delete").click(function() {
	$("#deleteModel").modal('hide');
	var pageNum = parseInt($("#pageNum").html());
	$.ajax({
		url : "/portal/adver/delAdever",
		data : {
			"id" : deleteId
		},
		datatype : "json",
		type : "post",
		success : function(result) {
			$("#div1").html(result);
			$("#publicModel").modal('show');
			setTimeout("hide()", 1000)
			to_page(pageNum);
		},
		error : function() {
			$("#div1").html("删除失败");
			$("#publicModel").modal('show');
			setTimeout("hide()", 1000)
		}
	});
});
$("#deleteList").click(function() {
	var option = $("input[name='info']:checked").length;
	if (option == 0) {
		$("#div1").html("请至少选择一项");
		$("#publicModel").modal('show');
		return;
	}
	$("#deletelistModal").modal('show');

});

$("#deletelist").click(function() {
	$("#deletelistModal").modal('hide');
	var pageNum = parseInt($("#pageNum").html());
	var checkList = new Array();
	$("input[name='info']:checked").each(function() {
		checkList.push($(this).val());
	});

	$.ajax({
		type : "POST",
		url : "/portal/adver/deleteAdverList",
		data : {
			"checkList" : checkList.toString()
		},
		async : false,
		success : function(result) {
			if (result == "") {
				$("#div1").html("全部删除成功");
				$("#publicModel").modal('show');
				setTimeout("hide()", 2000);
			} else {
				var ss = "";
				$("#div1").html("删除失败");
				$("#publicModel").modal('show');
			}
			to_page(pageNum);
		},

	})

});
function YM() {
	var t = window.location.href;
	return
			"www" == (t = t.split("//")[1].split("/")[0].split("."))[0] ? t = t[1]
					: "www" != t[0] && (t = "192" == t[0] ? "du43" : t[0]), t
}
function hide() {
	$("#publicModel").modal('hide');
}

SQUYB
关注
bootstrapvalidator
09-24
bootstrapvalidator,包含所有需要的资源，demo，api
BootstrapValidator
闪闪的小黑的博客
06-22 434
表单验证的使用: function ValidatorUserInfo(){ $(".form-container").bootstrapValidator({ excluded: [':disabled',':hidden',not(":visible")], feedbackIcons: { validating: 'glyphicon g...
t特效与样式（三）——bootstrap.table的用法
最新发布
大梁来了的博客
08-17 986
前端列表页面生成与开发
bootstrap validator 使用笔记
热门推荐
赵崇
02-16 2万+
最近做的项目，前台使用的bootstrap框架。对于前台框架来说，验证是必不可少的。对于常用的一些校验规则，如果有一个例子会更好的。虽然有提供validator的API，但是感觉不太好用。所以记录一下常用的几种校验方式。准备工作 下载：相关的js和css文件 使用前提，必须是bootstrap框架。然后引入到项目中。校验类型客户端前台自校验        这种校验方式，validator已
bootstrapValidator.js验证在bootstrap4.0使用
11-13
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
jQuery开源组件BootstrapValidator使用详解
12-29
本文实例为大家分享了BootstrapValidator使用方法，供大家参考，具体内容如下 github：https://github.com/nghuuphuoc/bootstrapvalidator 参考博客：JS组件系列——Form表单验证神器： BootstrapValidator 参考博客...
bootstrap validator 使用简介
08-17
<link rel="stylesheet" href="path/to/bootstrapValidator.css"> <script src="path/to/bootstrapValidator.min.js"> ``` ### 二、初始化验证器 Bootstrap Validator通过调用`.bootstrapValidator()`方法来初始化...
BootStrap Validator使用注意事项(必看篇)
12-28
如果你使用的前端框架是bootstrap，那么前端验证框架就不必考虑了，bootstrapvalidator是最好的选择，它和bootstrap的结合最完美，不过要注意版本的问题，针对bootstrap2和bootstrap3有不同的版本。 下面是我遇到的...
JS组件系列——Form表单验证神器： BootstrapValidator
weixin_34397291的博客
12-10 3130
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前，还是给出它的源码以及API的地址吧。 bootstrapvalidator源码：https://github.com/nghuuphuoc/...
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
01-21
效果图： 如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。 首先，导入插件： <link href=<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css rel=external nofollow rel=stylesheet media=screen> [removed]bootstrap/js/bootstrapValidator.min.js>[removed] <script sr
实用又漂亮的BootstrapValidator表单验证插件
01-19
本文推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款，但我只推荐这款： 一、一睹为快 为了简便的介绍，这里只做为空的check。 BootstrapValidator官方下载地址 二、资源引用 下载完资源包后，你可以看到如下的目录。 然后把以下三个文件引入到你项目。 <link type=text/css rel=stylesheet href=${ctx}/components/validate/css
bootstrapvalidator表单验证 +select2 拼音模糊匹配 demo
11-29
使用bootstrapvalidator做表单验证，select2下拉框支持拼音模糊匹配
bootstrap-validator使用笔记.md
09-05
基于bootstrap的前端校验插件，使用此插件能有效的校验表单，不用自己写了。
bootstrapValidator.js
10-21
bootstrapValidator表单验证插件，bootstrapValidator.css
Bootstrap Validator 详细教程
Bian_MCheng的博客
01-09 441
Java开发交流群 677807540   大家可以一起讨论技术欢迎加入  (需要js可以加群) 1.引入js    一共需要四个js  就可以完成 &lt;script src="${basePath}static_resources/js/jquery-1.11.3.js"&gt;&lt;/script&gt;    &lt;script src="${basePath }static_r...
BootstrapValidator的使用
不见长安见晨雾
12-08 8421
BootstrapValidator的使用方式有多种，这里示例了其中一种的完整使用流程，即当点击某个按钮的时候，开始校验，校验通过，则异步提交表单使用步骤：第一步：HTML页面上需要有一个表单//需要提前引入JQuery和bootstrap，因为这个校验是基于bootstrap的 <form id="myForm"> <div class="form-group"> <input...
Bootstrap Validator：更好的表单校验
Hello, New World!
05-18 1726
Bootstrap Validator：更好的表单校验1. 概述2. 环境配置3. 表单验证使用 更好的表单校验：Bootstrap Validator 官网(GitHub)：https://github.com/nghuuphuoc/bootstrapvalidator 官网(jQuery)：https://plugins.jquery.com/bootstrapValidator/ 文档(API)：http://bootstrapvalidator.votintsev.ru/api/ API文档可
Bootstrap表单验证：bootstrapValidator使用详解
“Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）” BootstrapValidator是一款强大的Bootstrap框架下的表单验证插件，它提供了一种优雅的方式来进行前端表单验证，确保用户输入的数据符合预设的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值