jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证

jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证

如下图

在这里插入图片描述

别忘了引入jQuery框架!!!

话不多说直接先上jQuery部分代码:
<script type="text/javascript">
	$(document).ready(function(){
		var tip1 = "<span class='span1'>用户名不能为空!</span>";//声明发生错误时在输入框后面添加的span
		var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";
		var tip3 = "<span class='span3'>地址不能为空!</span>";
		var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>";
		var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//声明判定邮箱格式的条件
		$(".id").blur(function(){
			if(!$(".id").val()){//判定用户名非空
				$(".span1").remove();
				$(".id").after(tip1);
			}
			else{
				$(".span1").remove();
			}
		});
		$(".email").blur(function(){
			
			if(!condition.test($(".email").val())){//判定邮箱格式
				$(".span2").remove();
				$(".email").after(tip2);
			}
			else{
				$(".span2").remove();
			}

		});
		$(".adress").blur(function(){
			if(!$(".adress").val()){//判定地址非空
				$(".span3").remove();
				$(".adress").after(tip3);
			}
			else{
				$(".span3").remove();
			}
		});
		$(".pwd").blur(function(){
			
			if($(".pwd").val().length < 5||$(".pwd").val().length >10){//判定密码长度不能小于5位且不能大于10位
				$(".span4").remove();
				$(".pwd").after(tip4);
			}
			else{
				$(".span4").remove();
			}
		});
		$(".button").click(function(){//符合所有条件则弹出弹窗表单验证通过,如果不符合则弹出弹窗提醒用户更改
			if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){
				alert("注册信息有误,请更改个人信息");
			}
			else{
				alert("注册成功");
			}
		})
	})
</script>
结构和样式:
<div class="main_box">
		<div class="title">
			欢迎注册原魔
		</div>
		<div class="box">
		<img alt="插图"  src="./img/可莉派萌.png" class="img">
			<form>
				用户名:<input class="id" type="text" ><br>&emsp;箱:<input class="email" type="text"><br>&emsp;址:<input class="adress" type="text"><br>&emsp;码:<input class="pwd" type="password"><br>
				<button type = "button" class="button">&emsp;&emsp;&emsp;</button>
			</form>
		</div>
	</div>
span{
		color:white;
	}
	body{
		font-family: sans-serif;
	}
	.main_box{
		width: 100%;
		height: 910px;
		background-color: red;
		background-image: linear-gradient(#e66465, #000000);
	}
	.title{
		font-size: 5em;
		color: white;
		width:100%;
		height: 100px;
		text-align: center;
	}
	.box{
		width: 1050px;
		height: 310px;
		margin: 150px auto 50px auto;
		padding-left: 360px;
	}
	input{
		height: 40px;
		width: 200px;
		border-radius: 20px;
		border: solid 1px #B5B5B5;
		margin: 10px;
		font-size: 1.2em;
	}
	form{
		color:white;
		font-size:1.2em;
		float: left;
		margin-left: 50px;
	}
	
	.button{
		width: 280px;
		height: 40px;
		background-color: #9781FD;
		border-radius: 25px;
		color:white;
		font-size: 1.3em;
		font-weight: 700;
		margin-top: 10px;
		
	}
	.img{
		width:310px;
		height: 310px;
		float: left;
	}

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赶不上明天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值