jQuery implements form validation function

<script type="text/javascript">
 $(document).ready(function(){
  var tip1 = "<span class='span1'>Username cannot be empty!</span>"; //Span added after the input box when an error occurs
  var tip2 = "<span class='span2'>The email format is incorrect or cannot be empty!</span>";
  var tip3 = "<span class='span3'>Address cannot be empty!</span>";
  var tip4 = "<span class='span4'>The password length cannot be less than five characters and can be at most ten characters!</span>";
  var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; //Declare the condition for determining the email format $(".id").blur(function(){
   if(!$(".id").val()){//Judge whether the user name is not empty$(".span1").remove();
    $(".id").after(tip1);
   }
   else{
    $(".span1").remove();
   }
  });
  $(".email").blur(function(){
   
   if(!condition.test($(".email").val())){//Determine the email format$(".span2").remove();
    $(".email").after(tip2);
   }
   else{
    $(".span2").remove();
   }

  });
  $(".adress").blur(function(){
   if(!$(".adress").val()){//Judge whether the address is not empty$(".span3").remove();
    $(".adress").after(tip3);
   }
   else{
    $(".span3").remove();
   }
  });
  $(".pwd").blur(function(){
   
   if($(".pwd").val().length < 5||$(".pwd").val().length >10){//Determine that the password length cannot be less than 5 digits and cannot be greater than 10 digits$(".span4").remove();
    $(".pwd").after(tip4);
   }
   else{
    $(".span4").remove();
   }
  });
  $(".button").click(function(){//If all conditions are met, a pop-up window will pop up to verify that the form has passed. If not, a pop-up window will pop up to remind the user to change if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){
    alert("The registration information is incorrect, please change your personal information");
   }
   else{
    alert("Registration successful");
   }
  })
 })
</script>

<div class="main_box">
  <div class="title">
   Welcome to register Yuanmo</div>
  <div class="box">
  <img alt="Illustration" src="./img/Kelipai Meng.png" class="img">
   <form>
    Username:<input class="id" type="text" ><br>
    Email:<input class="email" type="text"><br>
    Address:<input class="adress" type="text"><br>
    Password:<input class="pwd" type="password"><br>
    <button type = "button" class="button">Register</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;
 }