bootstrapValidator表单验证的使用,登陆Demo

标签: bootstrapValidator  Jquery  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").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;
							}
						}
					}
				}

 

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

智能推荐

剑指offer 合并两个排序的链表

题目 链接:https://leetcode-cn.com/problems/he-bing-liang-ge-pai-xu-de-lian-biao-lcof/ 思路 我想的是,与合并两个有序数组一样的思维,新建一个链表,然后判断谁的值大,进而在新的链表上面进行插入。 看书思路 合并链表是一个递归问题:合并一个节点后可以转化为一个子问题。终止条件是其中一个链表为空 代码 链表反转也可以用递归解决...

Java编程思想 第三章:操作符

Java中的操作符和c/c++中的操作符基本一致,因为我之前学习过C语言和C++,所以本章的内容大部分都已熟知,下面只做简单的介绍。 Java操作符及优先级 Java中的操作符包括算术操作符,关系操作符,逻辑操作符,位运算符、自操作运算符、移位运算符、赋值运算符和其他运算符。 算术操作符:包括加减乘除和取余(%),优先级乘除取余高于加减,都是双元运算符,其中加法(+)可以用来连接两个字符串,比如:...

JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA

JetBrains 系列开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 Fil...

C语言小函数—二进制与十六进制

测试如下 “` int main() { long int num = 15; } “`...

仿微博或微信的文章多图显示(自定义MultiImageView)

按照一般的规矩,先上张图来供大伙看看 如果大致是大伙们需要实现的功能,不烦一观 自定义MultiImageView 工具类 具体使用 app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0' AndroidManifest.xml中配置联网权限 <uses-permission android:name=&q...

猜你喜欢

经典进程同步和互斥问题

经典进程同步与互斥问题 前言 一、生产者-消费者问题 1.问题描述 2.问题分析 3.代码 二、读者-写者问题 1.问题描述&&分析 2.代码 三、哲学家进餐问题 1.问题描述&&分析 2.代码 四、理发师问题 1.问题描述&&分析 2.代码 前言 在多道程序设计环境中,进程同步是一个非常重要的问题,下面讨论几个经典的进程同步问题。 一、生产者-消费...

java设计模式——ThreadLocal线程单例

1、定义一个ThreadLocal线程单例,代码如下: 2、定义一个多线程类,代码如下: 3、定义一个测试类,代码如下: 4、输出结果,如下图:...

【tensorflow】线性模型实战

线性模型:y = 1.477 * x + 0.089   1. 采样数据 采样噪声eps在均值0,方差0.01的高斯分布中,而后在均匀分布U(0,1)中,区间[-10,10]进行n=100次随机采样:   2. 计算误差 循环计算每个点的预测值与真是值之间差的平方并累加,从而获得训练集上的均芳误差损失值。   3. 计算梯度   4. 梯度更新 对权重w和偏...

常见损失函数和评价指标总结(附公式&代码)

网上看到一篇很实用的帖子关于常见损失函数和评价指标,收藏下来 本文转载于https://zhuanlan.zhihu.com/p/91511706 ------------------------------------------------------------------------------------------------------------------------------...

为什么 4G/5G 的直播延时依然很高

通信技术的发展促进了视频点播和直播业务的兴起,4G 和 5G 网络技术的进步也使得流媒体技术变得越来越重要,但是网络技术并不能解决流媒体直播的高延迟问题。 本文不会介绍网络对直播业务的影响,而是会分析直播中常见的现象 — 主播和观众之间能够感觉到的明显网络延迟。除了业务上要求的延迟直播之外,有哪些因素会导致视频直播的延迟这么高呢? live-streaming  图 1 - ...