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

如下图

别忘了引入jQuery框架！！！

话不多说直接先上jQuery部分代码：

<script type="text/javascript">$(document).ready(function(){var tip1 = "<span class='span1'>用户名不能为空!</span>";//声明发生错误时在输入框后面添加的spanvar 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;}