PHP7掲示板開発のためのJS検証

PHP7 チュートリアル掲示板開発で使われる JS 検証を紹介するコラム

##おすすめ ( 無料):

PHP7 チュートリアル

このセクションの JS キーワードは次のとおりです:

function、onsubmit、onclick , document.getElementsByTagName (これらはフロントエンド開発でよく使用されるため、習得する必要があります)

手順 1 のページに基づいて JS 検証フォーム イベントを追加して改善しますユーザー エクスペリエンス: バックエンドによって受信されるユーザー送信データが意図されたものであることも確認してください。

要件を取得したら、急いでコードを入力しないでください。まず、使用する必要がある知識ポイントを確認し、アイデアを明確にし、おそらく計画を念頭に置いてください。特に新しい時代では、テクノロジーや新しいトリックを毎日取り入れ、私たちはさらに、思考を常に明確にしておく必要があります。ネイティブ JS、JQuery、またはその他のフロントエンド フレームワークであっても、すべては同じままです。強固な JS 基盤がなければ、成功することはできません。世界。

以下の掲示板フォームのネイティブ JS 検証を実装するには、さまざまな方法があります。ここでは、一般的に使用されているものの 1 つを使用します。他の方法は見つかりますか? コメント エリアで共有できます。いいですね。 、ただシェアしたいだけです！ ~

方法:

• 1.

  onclick、onsubmit、などのマウス クリック イベントをトリガーする方法を決定します。 xxx.click(function(){}) など (多くの検証方法があり、将来的にはゆっくりと発見する必要があります。魔法のような JS の世界があなたを待っています);

  Iフォーム検証をアクティブにする

  checkform 関数をトリガーするために、メッセージ ボードの onclick イベントに送信ボタンを追加し、その後 onsubmit="return false;"## を追加しました。 # フォーム テーブルのデフォルトの送信イベント (イベントのバブリングを防ぐ) を防ぐために、form タグに属性を追加します。コードを具体的に見て実際に試してみてください~a、サンプル コード スニペット
  

2. JS 関数を定義します;
• # #a. 関数名は

  function

  b で始まります。b. フォーム要素を選択するには、document.getElementsByTagName('input')
  を使用します。c. バブリングを防ぐには (preventフォーム送信。検証が成功した場合にのみ送信する必要があります)、return false;
  d を使用し、スクリプトは document.フィードバック_フォーム.submit(); を使用してフォーム送信をトリガーします。
  フィードバック_フォームはフォームの名前ですフォーム

  3. マウス クリック イベントを送信タグにバインドして、定義した JS 関数をトリガーします。たとえば、 # を追加します。 ##onclick="関数名"

• aをフォーム送信タグ属性に追加します。サンプルコードスニペット&lt ;input type="submit" onclick="checkform()" value="送信your message" class="sub" />

  ##完全なコード :

  nbsp;html>
  
      
          <meta>
          <title>留言板_科科分享</title>
          <!-- 2.新建css样式文件并根据效果图编写css代码 -->
          <link>
          <!-- 3.js表单验证 -->
          <script>
              function checkform(){
                  var nickname = document.getElementsByTagName(&#39;input&#39;)[0].value; // 获取用户输入的姓名
                  var tel = document.getElementsByTagName(&#39;input&#39;)[1].value; // 获取用户输入的联系方式
                  var content = document.getElementsByTagName(&#39;textarea&#39;)[0].value; // 获取用户输入的留言内容
                  // 如果没有输入姓名 则提示
                  if(nickname == &#39;&#39;){
                      alert(&#39;请输入您的姓名&#39;);
                      document.getElementsByTagName(&#39;input&#39;)[0].focus(); // 将光标定位到姓名输入框
                      return false; // 阻止冒泡 输入姓名后才能通过
                  }
                  // 如果没有输入联系方式 则提示
                  if(tel == &#39;&#39;){
                      alert(&#39;请输入您的联系方式&#39;);
                      document.getElementsByTagName(&#39;input&#39;)[1].focus(); // 将光标定位到联系方式输入框
                      return false;  // 阻止冒泡 输入联系方式才能通过
                  }
                  // 如果没有输入留言内容 则提示
                  if(content == &#39;&#39;){
                      alert(&#39;请输入您的联系方式&#39;);
                      document.getElementsByTagName(&#39;textarea&#39;)[0].focus(); // 将光标定位到留言内容输入框
                      return false;  // 阻止冒泡 输入留言内容才能通过
                  }
                  document.feedback_form.submit(); // 提交用户数据到后端action中的地址
              }
          </script>
      
      
          <!-- 工作区，呈现给用户看的 -->
          <!-- 1.开始搭建脚手架 -->
          <p>
              </p><p>
                  </p><h3 id="留言板">留言板</h3>
                  <h5 id="FEEDBACK">FEEDBACK</h5>
              
              <p>
                  </p>

                      

                                                                         

                                                            
                            
練習、練習、練習。大事なことは三回叫んでみよう！ ！ ！

---

はい、ネイティブ JS 検証の掲示板はここで終わります。他の検証方法がある場合や質問がある場合は、お気軽にコメント エリアに書き込んでください。 ~

以上がPHP7掲示板開発のためのJS検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。