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; }