表单数据验证组件

最新推荐文章于 2022-10-08 15:01:02 发布

Dragon.liu

最新推荐文章于 2022-10-08 15:01:02 发布

阅读量113

点赞数

分类专栏： JavaScript 文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/weixin_42223701/article/details/121127926

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<!-- 导入验证文件 -->
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<script type="text/javascript" src="bootstrap/js/form_validate.js"></script>

</head>
<body>
	<div class="container">
		<form action="index_submit" class="form-horizontal" id="myform">
			<fieldset>
				<legend><span class="glyphicon glyphicon-user"></span>用户注册</legend>
				<div class="form-group" id="nameDiv">
					<label for="name" class="col-md-1 control-label">姓名</label>
					<div class="col-md-5">
						<input type="text" name="name" placeholder="请输入姓名" id="name" class="form-control">
					</div>
					<div class="col-md-3" id="nameSpan"></div>
				</div>
				<div class="form-group" id="pwdDiv">
					<label for="pwd" class="col-md-1 control-label">密码</label>
					<div class="col-md-5">
						<input type="password" name="pwd" placeholder="输入密码" id="pwd" class="form-control">
					</div>
					<div class="col-md-3" id="pwdSpan"></div>
				</div>
				<div class="form-group" id="ageDiv">
					<label for="age" class="col-md-1 control-label">年龄</label>
					<div class="col-md-5">
						<input type="text" name="age" placeholder="输入年龄" id="age" class="form-control">
					</div>
					<div class="col-md-3" id="ageSpan"></div>
				</div>
				<div class="form-group" id="emailDiv">
					<label for="email" class="col-md-1 control-label">邮箱</label>
					<div class="col-md-5">
						<input type="text" name="email" placeholder="输入邮箱" id="email" class="form-control">
					</div>
					<div class="col-md-3" id="emailSpan"></div>
				</div>
				<div class="col-md-2 col-md-offset-1">
					<input type="submit" class="btn btn-info" value="注册">
					<input type="reset"   class="btn btn-danger" value="重置">
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>

$(document).ready(function(){
	$("#myform").validate({
		debug:true,//取消表单的自动提交
		submitHandler:function(form){
			//实现表单提交的函数
			form.submit();
		},
		errorPlacement:function(error,element){
			//显示错误提示信息
			//将错误提示放在之前预留的div中
			$("#"+$(element).attr("id")+"Span").append(error);

		},
		highlight:function(element){
			$(element).fadeOut(1,function(){
				$(element).fadeIn(1);
				//将原来的蓝色改变为红色
				$("#"+$(element).attr("id")+"Div").attr("class","form-group has-error")
			})
		},
		unhighlight:function(element){
			$(element).fadeOut(1,function(){
				$(element).fadeIn(1);
				//将原来的蓝色改变为红色
				$("#"+$(element).attr("id")+"Div").attr("class","form-group has-success")
			})
		},
		errorClass:"text-danger",
		rules:{
			name:{
				required:true,
			},
			pwd:{
				required:true,
			},
			age:{
				required:true,
				digits:true
			},
			email:{
				required:true,
				email:true
			}
		}
	})
})

在这里插入图片描述

Dragon.liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单数据验证组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap表单样式一</title>  <meta name=viewport content="width=device-width,initial-scale=1"> <script type="text/javas
复制链接

扫一扫