bootstrapValidator表单验证的使用,登陆Demo_bootstrapvalidator.js bootstrapvalidator.css 下载-程序员宅基地

技术标签: 后端验证  笔记  验证  前端  bootstrapValidator  # bootstrap  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的服务所以出错了。这不影响。

 

本文源码及相关的依赖资源:

https://download.csdn.net/download/bof_jangle/10577800

 

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

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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Bof_jangle/article/details/81346589

智能推荐

软考可以不考初级直接考中级吗?_软考可以直接考中级吗-程序员宅基地

文章浏览阅读1.5k次。软考可以直接考中级吗,很多人以为软考必须考完初级才能考中级,其实软考是可以直接考中级的呢,也是可以直接报名高级考试的,这个划重点 !!_软考可以直接考中级吗

苹果怎么取消自动续费?分享关闭订阅的教程_苹果手机订阅的自动续费怎么取消-程序员宅基地

文章浏览阅读2.4k次。苹果怎么取消自动续费?在使用手机的时候,我们会使用一些限时免费的软件,或者充值一些会员,很多时候都会默认到期以后自动续费,有些时候不关注就会出现莫名其妙的扣款,想要关闭这些自动续费的内容要怎么操作?其实很简单,接下来就和大家分享一下。第一种:通过苹果手机的订阅以下操作步骤为苹果手机iOS 13.4.1系统下的步骤,系统版本不同可能会导致操作步骤不同,在操作之前可以先确认下系统版本。1、首先打开苹果手机的设置2、依次进入自己的账户(Apple ID)->订阅3、选择自己要取消的服务直接退订第二_苹果手机订阅的自动续费怎么取消

东方头条 弹窗_mini.eastday 弹窗-程序员宅基地

文章浏览阅读8.7k次,点赞2次,收藏2次。应该是浏览器或DNS被劫持了,亲测一下方法可完美解决;首先表态,东方头条是沙比,什么年代了,还用这种套路;1)在windows安装盘,定位到如下路径C:\Windows\System32\drivers\etc,把里面的hosts文件用记事本打开(直接双击后会弹出使用哪个程序打开,选择记事本即可);2)把hosts文件增加如下两行,然后保存即可。127.0.0.1 http://eastday.c..._mini.eastday 弹窗

mysql启动报错“NET HELPMSG 3534“的解决办法-程序员宅基地

文章浏览阅读1.1k次。原因:mysql安装步骤错误,从mysql5.7.6开始,mysql需要这样安装:mysqld--initialize-insecure或者mysqld--initializemysqld -installnet start mysqlmysqld--initialize-insecure自动生成无密码的root用户,mysqld--initializ..._more information is available by typing net helpmsg 3534.

区块链学习资源链接_metachain2023.github.io-程序员宅基地

文章浏览阅读831次。区块链如今已经被作为国家战略大力发展,可是各种学习资料并不集中,如果你感兴趣的话收藏这些区块链学习相关的技术网站和分析网站。不定时更新......_metachain2023.github.io

Linux(CentOS7)安装Redis7并启动_centos7启动redis-程序员宅基地

文章浏览阅读1.3k次。Linux(CentOS7)安装Redis7并启动_centos7启动redis

随便推点

iframe(2) --- 动态设置iframe高度_react hook 动态设置iframe的高-程序员宅基地

文章浏览阅读8.7k次。iframe 动态设置iframe高度_react hook 动态设置iframe的高

按8字节对齐_按8字节对齐(即最低3位为000-程序员宅基地

文章浏览阅读1.1k次。序号对齐字节范围081-81169-1622417-2433225-3244033-40_按8字节对齐(即最低3位为000

超实用且高效的线框设计工具_uzer.meuzer.-程序员宅基地

文章浏览阅读1.1k次。Moqups—在线Mockup线框工具[https://moqups.com]Fluid UI—Android、 iOS、Windows App在线原型线框工具[https://fluidui.com/demos]Pencil—GUI原型工具(开源)UXToolbox—基于Windows的线框ToolMockups.me—UI线框应用Live Wires_uzer.meuzer.

通过socket实现不同两台电脑上的进程通信_两台pc间程序之间实现通讯-程序员宅基地

文章浏览阅读3k次。发送# send_infoSockin = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # new socketSockin.bind(('192.168.31.102', 23001)) # socket bind this computer ip and portdata_to_json = json.dumps(ir_se..._两台pc间程序之间实现通讯

html5弹性盒子模型,推荐10款弹性盒子源码(收藏)-程序员宅基地

文章浏览阅读298次。为父容器添加display:flex/inline-flex 父容器可以使用的属性有:1.flex-direction:决定主轴的方向有四个属性值:row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2.flex-wrap:如果一条轴线排不下,如何换行。..._哪些标签可以做弹性盒子

低功耗蓝牙芯片智能照明解决方案_蓝牙灯控解决方案-程序员宅基地

文章浏览阅读412次。智能照明是目前智能家居中普遍的应用,可实现节能省电和提供更高的舒适性和便利性。智能照明是指利用物联网技术、有线/无线通讯技术、电力载波通讯技术、嵌入式计算机智能化信息处理,以及节能控制等技术组成的分布式照明控制系统,来实现对照明设备的智能化控制。蓝牙智能照明支持场景:点对点遥控智能灯;该方案通过标准蓝牙协议,在巨微的低成本解决方案上实现LED灯的调光调色。备选芯片型号:MS1793,MS1591。点对组或多组遥控智能灯(MG-Mesh);该方案采用巨微创新的MG-Mesh系统架构,用最低成本实_蓝牙灯控解决方案

推荐文章

热门文章

相关标签