基于前端验证框架bootstrapValidator的表单验证

最新推荐文章于 2022-11-04 17:06:23 发布

qq_35907502

最新推荐文章于 2022-11-04 17:06:23 发布

阅读量1.4k

点赞数

文章标签：表单验证 bootstrap bootstrapValidator

本文链接：https://blog.csdn.net/qq_35907502/article/details/82080372

版权

前两天学习到了前端验证框架bootstrapValidator，因此用它写了个简单的表单验证，没有涉及后台。其中表单用到了bootstrap框架，验证部分用到了bootstrapValidator框架。

效果图如下：

什么都不填写，直接提交后如下，然后按钮不可点击：

错误填写效果：按钮不可点击

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入boostrap样式文件-->
		<link rel="stylesheet" type="text/css" href="asserts/bootstrap/css/bootstrap.min.css"/>
		<!--引入boostrap validator样式文件-->
		<link rel="stylesheet" href="asserts/bootstrapvalidator/css/bootstrapValidator.min.css" />
	</head>
	<body>
		
		<div class="container">
			<form action="" class="form-horizontal myform">
				<div class="form-group">
					<label for="" class="control-label col-sm-2">用户名</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" name="username" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="control-label col-sm-2">手机号</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" name="telphone" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="control-label col-sm-2">邮箱地址</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" name="email" />
					</div>
				</div>
				
				<!--提交按钮-->
				<div class="form-group">
					<div class="col-sm-2 col-sm-offset-6">
						<button class="btn btn-success btn-block" type="submit">提交</button>
					</div>
				</div>
			</form>
		</div>
		
		
		<!--导入jquery库-->
		<script src="js/jquery-3.3.1.min.js"></script>
		<!--导入boostrap js库-->
		<script src="asserts/bootstrap/js/bootstrap.min.js"></script>
		<!--导入boostrap validator js库-->
		<script src="asserts/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
		<!--导入语言包-->
		<script src="asserts/bootstrapvalidator/js/language/zh_CN.js"></script>
		
		<script>
			$(function(){
				//为指定的表单控件绑定验证函数
				$('.myform').bootstrapValidator({
					//默认的错误提示信息
					message:'这不是一个有效值',
					//反馈图标样式(glyphicon)
					feedbackIcons:{
						valid:'glyphicon glyphicon-ok',
						invalid:'glyphicon glyphicon-remove',
						validating:'glyphicon glyphicon-refresh'
					},
					//设置需要校验的字段
					fields:{
						username:{
//							message:'用户名输入有误',
							//设置验证器
							validators:{
								//不为空验证
								notEmpty:{
//									message:'用户名不允许为空'
								},
								//长度验证
								stringLength:{
									min:6,
									max:16,
//									message:'用户名必须在6~16之间'
								},
								regexp:{
									regexp:/^\w*$/,
									message:'用户名必须由英文字母，数字或者下划线组成'
								}
							}
						},
						telphone:{
							message:'无效的手机号',
							validators:{
								notEmpty:{
									message:'手机号必须填写'
								},
								//手机号校验器
								//此校验器多数地区不支持，建议使用正则表达式
//								phone:{
//									country:'CN',
//									message:'手机号格式不正确'
//								}
								regexp:{
									regexp:/^1[3578]\d{9}$/,
									message:'手机号格式不正确'
								}
							}
						},
						email:{
							message:'错误的邮箱地址',
							validators:{
								notEmpty:{
									message:'邮箱地址不为空'
								},
								emailAddress:{
									message:'邮箱地址格式不正确'
								}
							}
						}
					}
				});
			})
		</script>
	</body>
</html>

qq_35907502

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
基于前端验证框架bootstrapValidator的表单验证

前两天学习到了前端验证框架bootstrapValidator，因此用它写了个简单的表单验证，没有涉及后台。其中表单用到了bootstrap框架，验证部分用到了bootstrapValidator框架。效果图如下：什么都不填写，直接提交后如下，然后按钮不可点击：错误填写效果：按钮不可点击代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;...
复制链接

扫一扫