jQueryはフォーム検証機能を実装します

<script type="text/javascript">
 $(ドキュメント).ready(関数(){
  var tip1 = "<span class='span1'>ユーザー名は空にできません!</span>"; //エラーが発生したときに入力ボックスの後に追加されるspan
  var tip2 = "<span class='span2'>メールの形式が正しくないか、空にできません。</span>";
  var tip3 = "<span class='span3'>アドレスは空にできません!</span>";
  var tip4 = "<span class='span4'>パスワードの長さは 5 文字未満にはできず、最大 10 文字までです。</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);
   }
   それ以外{
    $(".span1").remove();
   }
  });
  $(".email").blur(関数(){
   
   if(!condition.test($(".email").val())){//メールの形式を決定します$(".span2").remove();
    $(".email").after(tip2);
   }
   それ以外{
    $(".span2").remove();
   }

  });
  $(".adress").blur(関数(){
   if(!$(".adress").val()){//アドレスが空でないかどうかを判断します$(".span3").remove();
    $(".adress").after(tip3);
   }
   それ以外{
    $(".span3").削除();
   }
  });
  $(".pwd").blur(関数(){
   
   if($(".pwd").val().length < 5||$(".pwd").val().length >10){//パスワードの長さは5桁未満、10桁を超えることはできないと判定します$(".span4").remove();
    $(".pwd").after(tip4);
   }
   それ以外{
    $(".span4").削除();
   }
  });
  $(".button").click(function(){//すべての条件が満たされると、フォームが通過したことを確認するポップアップ ウィンドウが表示されます。そうでない場合は、変更をユーザーに通知するポップアップ ウィンドウが表示されます if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){
    alert("登録情報が正しくありません。個人情報を変更してください");
   }
   それ以外{
    alert("登録が完了しました");
   }
  })
 })
</スクリプト>

<div class="main_box">
  <div class="title">
   Yuanmo への登録を歓迎します</div>
  <div class="box">
  <img alt="イラスト" src="./img/Kelipai Meng.png" class="img">
   <フォーム>
    ユーザー名:<input class="id" type="text" ><br>
    メールアドレス:<input class="email" type="text"><br>
    住所:<input class="adress" type="text"><br>
    パスワード:<input class="pwd" type="password"><br>
    <button type = "button" class="button">登録</button>
   </フォーム>
  </div>
 </div>

スパン{
  色：白;
 }
 体{
  フォントファミリー: サンセリフ;
 }
 .main_box{
  幅: 100%;
  高さ: 910px;
  背景色: 赤;
  背景画像: 線形グラデーション(#e66465, #000000);
 }
 。タイトル{
  フォントサイズ: 5em;
  色: 白;
  幅:100%;
  高さ: 100px;
  テキスト配置: 中央;
 }
 。箱{
  幅: 1050ピクセル;
  高さ: 310px;
  マージン: 150px 自動 50px 自動;
  左パディング: 360px;
 }
 入力{
  高さ: 40px;
  幅: 200ピクセル;
  境界線の半径: 20px;
  境界線: 実線 1px #B5B5B5;
  マージン: 10px;
  フォントサイズ: 1.2em;
 }
 形状{
  色：白;
  フォントサイズ:1.2em;
  フロート: 左;
  左マージン: 50px;
 }
 
 。ボタン{
  幅: 280ピクセル;
  高さ: 40px;
  背景色: #9781FD;
  境界線の半径: 25px;
  色：白;
  フォントサイズ: 1.3em;
  フォントの太さ: 700;
  上マージン: 10px;
  
 }
 .img{
  幅:310ピクセル;
  高さ: 310px;
  フロート: 左;
 }