bootstrapValidator表单验证的使用，登陆Demo_博风的博客-程序员秘密

技术标签：后端验证验证前端 bootstrapValidator bootstrap remote

需要引入内容有：jQuery的js文件，bootstrapValidator.js ，bootstrapValidator.css文件。

formValidatorTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrapValidator登陆验证的demo</title>
<link type="text/css" rel="stylesheet" href="css/bootstrapValidator.min.css">
</head>
<body>
<form id="jangleForm">
	<div class="form-group">
		<label for="testName">用户名：</label>
		<input type="text" class="form-control" id="testName" name="testName" placeholder="请输入用户名">
	</div>
	<div class="form-group">
		<label for="testPassword">密&nbsp;&nbsp;&nbsp;码：</label>
		<input type="text" class="form-control" id="testPassword" name="testPassword" placeholder="请输入密码">
	</div>
    <button id="btn" >Submit</button>
    <div style="border:solid;width:150px;"><a id="btn-a">非button的提交</a></div>
</form>
<script type="text/javascript" src="jQuery/jquery-3.3.1.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#jangleForm").bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields:{
				testName:{
					validators:{
						notEmpty:{
							message:"请输入用户名！"
						},
						regexp: {//正则验证
							regexp: /^[a-zA-Z0-9_\.]+$/,
							message: '所输入的字符不符要求'
						},
						remote: {//将内容发送至指定地址验证，返回验证结果，查询用户名是否存在
							delay:1000, //延迟1秒验证
							url: 'xxx.action', //验证地址。该验证通过 json串的valid:true 来判断是否验证通过  valid:false 则为不通过 后端用map转json的方式的话，就用"valid"的key。
												//该验证会把testName传给后端，如果要增加传参，直接在url后面增加参数即可，如："xxx.action?a=1&b=test",
							message: '用户名已经存在'
						}
					}
				},
				testPassword:{
					validators:{
						notEmpty:{
							message:"请输入密码"
						}
					}
				}
			}
		});
		//提交的验证 非button按钮
		$("#btn-a").click(function(){
                        $("#jangleForm").data("bootstrapValidator").resetForm();    //重置表单校验（可以解决日期控件修改后无法通过新的校验的问题。）	
			$("#jangleForm").data("bootstrapValidator").validate();	//提交验证写法1
// 			$("#jangleForm").bootstrapValidator("validate");		//提交验证写法2
			var valid = $("#jangleForm").data("bootstrapValidator").isValid(); //验证通过返回true 不通过false
			if(!valid){
				alert("请完善信息");
				return;
			}
			//验证通过后通过ajax对表单进行提交  if(1==2)把ajax请求屏蔽了
			if(1==2)
			$.ajax({
				url: "xxx/xxx.action",
				dataType:"json",
				data : $("#jangleForm").serialize(),
				success : function(data){
					alert(data);
				},
				error: function(data){
					alert("请求出错啦，请联系管理员");
				}
			});
		});
	});
</script>
</body>
</html>

页面效果：

点击提交后的效果：

用户名不符合正则表达式的效果：

非button的提交效果：

url的后端校验(remote)：

可以看到，这个校验是将文本内容以参数的形式传递给后端来做的唯一性等等的验证。由于我这里没有xxx.action的服务所以出错了。这不影响。

callback 一般可用于select来判断是否选择了选项。

				fieldName : {
					
					validators : {
						callback : {
							message : '请选择类型',
							callback: function(value,validator){
								return  $("选择器").val() != 0;
							}
						}
					}
				}

本文链接：https://blog.csdn.net/Bof_jangle/article/details/81346589

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

spyder突然打不开了_spyder忘记保存_Hong.1948的博客-程序员秘密

spyder突然启动不了，尝试多次都没反应，也没有任何提示解决办法：把 C:\Users\sh 下的 .spyder-py3 文件夹删了，再重新启动就好了注意： sh是windows账户名...

java多线程并发之旅-19-InterruptedException 中断异常处理及中断机制_阻塞状态被中断为什么会爆异常_老马啸西风的博客-程序员秘密

java 中断机制要知道如何处理，首先要知道 java 的中断机制。引言如果对 Java 中断没有一个全面的了解，可能会误以为被中断的线程将立马退出运行，但事实并非如此。中断机制是如何工作的？捕获或检测到中断后，是抛出 InterruptedException 还是重设中断状态以及在方法中吞掉中断状态会有什么后果？Thread.stop 与中断相比又有哪些异同？什么情况下需要使用中断？...

mybatis 返回Map时，key的大小写问题_付月半子的博客-程序员秘密

mybatis 返回Map时，key的大小写问题遇到一个问题，mybatis返回map类型，他的key无论如何都是大写的。解决方法：将需要返回的列起一个别名，并且将别名包含在引号内如：SELECT re.type as "type",msg.REPORTID_ID as "reportId",pp.ID as "id",pp.CODE as "code" ,pp.NAM...

基于Tensorflow2 Lite在Android手机上实现时间序列温度预测（二）[email protected]的博客-程序员秘密

前言Tensorflow2之后，训练保存的模型也有所变化，基于Keras接口搭建的网络模型默认保存的模型是h5格式的，而之前的模型格式是pb。Tensorflow2的h5格式的模型转换成tflite格式模型非常方便。本教程就是介绍如何使用Tensorflow2的Keras接口训练分类模型并使用Tensorflow Lite部署到Android设备上。训练和转换模型以下是使用Tensorflow2的keras搭建的一个Lstm模型实现温度预测，本教程主要是介绍如何在Android设备上使用Tensorf

Spring Boot项目（一）：sts(Spring Tool Suite)工具的下载与配置_不能留白的博客-程序员秘密

踩了很多坑，总结了很多经验才决定写下来，不容易，请各位点点赞，评评论，谢谢。一、为什么要使用sts（Spring Tool Suite）工具。很多人喜欢用IDEA，IDEA有很多好处，但是他的完整的功能是收费的，当然你也可以破解，但是工作以后是不允许你使用破解软件的，没有必要的话，很多公司都是使用开源的免费的软件替代品，所以这就是为什么使用sts，因为他开源，免费。sts的...

Spark Structured Streaming实战--使用滑动窗口(Sliding windows)_一铭的博客-程序员秘密

滑动窗口比翻滚窗口要复杂一些，滑动窗口的窗口之间有重叠的区域，这个区域会被计算两次。那么，为什么要这么设计呢？滑动窗口通常用于流量控制，资源保护等场景，它可以让控制更加平滑。介绍顾名思义，该窗口非固定，而是滑动的。在滑动窗口中，元组被分组在一个窗口中，该窗口根据指定的间隔在数据流中滑动。滑动窗口可以包含重叠的数据，一个数据可以属于多个滑动窗口。可以认为窗口每次的滑动就是产生了一个新的窗口。就需要开始该窗口的计算。当然若前一个窗口还没有计算还会继续计算，所以就会产生一些重叠的区域。关于滑动窗口的详细的原

随便推点

Html5视频播放video标签使用详解【转】_weixin_34235135的博客-程序员秘密

1，下面是一个播放视频的最简单样例（controls属性告诉浏览器要有基本播放控件）<video src="hangge.mp4" controls></video>2，通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300"></v...

oracle运维脚本_DBA-fashion的博客-程序员秘密

# 监控Oracle监听状态(chk_lsnr_stat.sh)# ======================================================================================# 监控Oracle监听器状态，发现状态异常启动监听，并发送邮件通知管理员，如果启动监听失败，发送邮件# 通知管理员。# ========...

在vue中循环中调用接口-promise.all()；按顺序执行异步处理_vue循环调用接口_储储随记的博客-程序员秘密

在vue中循环调用接口-promise.all()methods: { handleAdd (arr) { this.loading = true const allApi = [] arr.forEach((item, index) => { const data = { id: item.id, name: item.name } const oneApi = api.add(da.

Android学习之Textview控件字体颜色设置及颜色色值_android textview 颜色_xiaoerbuyu1233的博客-程序员秘密

在Textview中设置字体的颜色和大小共有两种方式：1、在.xml中设置android:text="这里是文字"android:textSize="字体大小"android:textColor="颜色代码"2、在Java中设置text.setText("文字");//设置文字内容text.setTextColor(Color.parseColor("#ff5e9cff"));//设置颜色text.setTextSize(30);;//设置字体大小最后附上Android

maven项目打包命令_maven打包命令_无聊的HZ的博客-程序员秘密

maven项目常用打包命令以及使用

Linux 基础及常用命令操作详解_linux常用命令详解和用法_琴酒3的博客-程序员秘密

Linux 基础及常用命令操作详解文章目录Linux 基础及常用命令操作详解一、什么是Shell？二、Linux命令的分类三、Linux命令行格式四、Linux命令行常用操作快捷键五、Linux常用命令pwd 查看当前所在的工作目录位置cd 切换工作目录相对路径与相对路径相对路径的表现形式ls 列表显示目录内容alias 别名（通过别名机制简化常用较长的命令）du 统计目录及文件空间占用情况mkdir 创建新目录创建空文件-touchln 创建连接文件cp 复制文件或目录rm 删除文件或目录（高危命令！）