bootstrap3表单验证插件bootstrapvalidator

最新推荐文章于 2023-12-07 09:56:47 发布

玩代码

最新推荐文章于 2023-12-07 09:56:47 发布

阅读量692

点赞数

分类专栏： bootstrap3

本文链接：https://blog.csdn.net/oGuiGui12345/article/details/100172134

版权

bootstrap3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<title>Bootstrap table</title> 
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>

<style>
	body{
		padding:10px;
	}
</style>
</head>

<body>
	<!-- 
		BootstrapValidator 是一个基于Bootstrap的表单验证插件，内置了许多表单验证器，也可以自定义验证器，功能强大
	-->
   <div class="container">
		<form action="" class="form-horizontal" id="myform">
			<div class="row">
				<div class="form-group">
					<label for="username" class="control-label col-sm-2 col-sm-offset-3">用户名</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="username"/>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label for="username" class="control-label col-sm-2 col-sm-offset-3">密码</label>
					<div class="col-sm-4">
						<input type="password" class="form-control" name="password"/>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<label for="username" class="control-label col-sm-2 col-sm-offset-3">确认密码</label>
					<div class="col-sm-4">
						<input type="password" class="form-control" name="repassword"/>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<div class="col-sm-4 col-sm-offset-5">
						<button type="submit" class="btn btn-primary">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
						<button type="reset" class="btn btn-primary">重&nbsp;&nbsp;&nbsp;&nbsp;置</button>
					</div>
				</div>
			</div>
		</form>
   </div>

   <script>
	   $(function(){
			$("#myform").bootstrapValidator({
				feedbackIcons:{
					valid:'glyphicon glyphicon-ok',
					invalid:'glyphicon glyphicon-remove',
					validating:'glyphicon glyphicon-refresh'
				},
				fields:{
					username:{
						validators:{
							notEmpty:{
								message:'用户名不能为空'
							},
                            stringLength:{
								min:6,
								max:10,
								message:'用户名长度必须在6-10之间'
							}
						}
					},
					password:{
						validators:{
							notEmpty:{
								message:'密码不能为空'
							},
                            stringLength:{
								min:6,
								max:10,
								message:'密码长度必须在6-10之间'
							}
						}
					}
				}
			});
	   });
   </script>
</body>
</html>

玩代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap3表单验证插件bootstrapvalidator

<!DOCTYPE HTML><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-s...
复制链接

扫一扫