PHP7掲示板開発のためのJS検証-PHP7-php.cn

function

ホームページ

バックエンド開発

PHP7

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

coldplay.xixi

Dec 22, 2020 am 09:29 AM

php7

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、サンプルコードスニペット <フォーム名="フィードバック_フォーム" アクション="/#" メソッド="ポスト" onsubmit="return false;">
# #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" />`

##完全なコード :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link rel="stylesheet" href="feedback.css">
        <!-- 3.js表单验证 -->
        <script type="text/javascript">
            function checkform(){
                var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名
                var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式
                var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容
                // 如果没有输入姓名 则提示
                if(nickname == ''){
                    alert('请输入您的姓名');
                    document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框
                    return false; // 阻止冒泡 输入姓名后才能通过
                }
                // 如果没有输入联系方式 则提示
                if(tel == ''){
                    alert('请输入您的联系方式');
                    document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框
                    return false;  // 阻止冒泡 输入联系方式才能通过
                }
                // 如果没有输入留言内容 则提示
                if(content == ''){
                    alert('请输入您的联系方式');
                    document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框
                    return false;  // 阻止冒泡 输入留言内容才能通过
                }
                document.feedback_form.submit(); // 提交用户数据到后端action中的地址
            }
        </script>
    </head>
    <body>
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p class="container_box">
            <p class="up">
                <h3 class="title">留言板</h3>
                <h5 class="subtitle">FEEDBACK</h5>
            </p>
            <p class="down">
                <form name="feedback_form" action="/#" method="post" onsubmit="return false;">
                    <p class="input">
                        <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> 
                        <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" />
                    </p>
                    <textarea class="content" cols="30" rows="10" name="nr"></textarea>
                    <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
                </form>
            </p>
        </p>
    </body>
</html>

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7563

CakePHP チュートリアル

1385

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

php7.0にmongo拡張機能をインストールする方法 Nov 21, 2022 am 10:25 AM

php7.0 に mongo 拡張機能をインストールする方法: 1. mongodb ユーザーグループとユーザーを作成します; 2. mongodb ソースコードパッケージをダウンロードし、ソースコードパッケージを "/usr/local/src/" ディレクトリに配置します; 3. 「src/」ディレクトリに入ります; 4. ソースコードパッケージを解凍します; 5. mongodb ファイルディレクトリを作成します; 6. ファイルを「mongodb/」ディレクトリにコピーします; 7. mongodb 設定ファイルを作成して設定を変更します。

php7がTCPポートが機能していないことを検出した場合の問題を解決する方法 Mar 22, 2023 am 09:30 AM

php5 では、fsockopen() 関数を使用して TCP ポートを検出できます。この機能を使用して、ネットワーク接続を開き、ネットワーク通信を実行できます。ただし、php7 では、fsockopen() 関数でポートを開けない、サーバーに接続できないなどの問題が発生する可能性があります。この問題を解決するには、socket_create() 関数とsocket_connect() 関数を使用して TCP ポートを検出します。

php7.0 にプラグインがインストールされているのに、まだインストールされていないと表示される場合はどうすればよいですか? Apr 02, 2024 pm 07:39 PM

PHP 7.0 でインストールされているプラグインが表示されない問題を解決するには: プラグインの設定を確認し、プラグインを有効にします。 PHP を再起動して、構成の変更を適用します。プラグインファイルの権限をチェックして、それらが正しいことを確認します。不足している依存関係をインストールして、プラグインが適切に機能することを確認します。他のすべての手順が失敗した場合は、PHP を再構築します。他に考えられる原因としては、プラグインのバージョンに互換性がない、間違ったバージョンをロードしている、PHP 構成の問題などが挙げられます。

PHP サーバー環境 FAQ ガイド: 一般的な問題を迅速に解決する Apr 09, 2024 pm 01:33 PM

PHP サーバー環境の一般的な解決策には、正しい PHP バージョンがインストールされていること、および関連ファイルがモジュールディレクトリにコピーされていることを確認することが含まれます。 SELinux を一時的または永続的に無効にします。 PHP.ini をチェックして構成し、必要な拡張機能が追加され、正しく設定されていることを確認します。 PHP-FPM サービスを開始または再起動します。 DNS 設定に解決の問題がないか確認してください。

php7.0のインストールとデプロイ方法 Nov 30, 2022 am 09:56 AM

php7.0 をインストールおよび展開する方法: 1. PHP 公式 Web サイトにアクセスして、ローカルシステムに対応するインストールバージョンをダウンロードします; 2. ダウンロードした zip ファイルを指定したディレクトリに解凍します; 3. コマンドラインウィンドウを開いて、次のリンクに移動します。「E:\php7」ディレクトリ「php -v」コマンドを実行するだけです。

システムの再起動後にUnixSocketの権限を自動的に設定する方法は？ Mar 31, 2025 pm 11:54 PM

システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります：sudo ...

Docker環境にPECLを使用して拡張機能をインストールするときにエラーが発生するのはなぜですか？それを解決する方法は？ Apr 01, 2025 pm 03:06 PM

エラーの原因とソリューションPECLを使用してDocker環境に拡張機能をインストールする場合、Docker環境を使用するときに、いくつかの頭痛に遭遇します...

php8 と php7 ではどちらが優れていますか? Nov 16, 2023 pm 03:09 PM

PHP7 と比較すると、PHP8 にはパフォーマンス、新機能と構文の改善、型システム、エラー処理と拡張機能の点でいくつかの利点と改善点があります。ただし、どのバージョンを使用するかは、特定のニーズとプロジェクトの状況によって異なります。詳細な紹介: 1. パフォーマンスの向上、PHP8 はコードの実行速度を向上できるジャストインタイム (JIT) コンパイラーを導入します; 2. 新機能と構文の改善、PHP8 は名前付きパラメーターとオプションのパラメーターの宣言をサポートします。関数の作成呼び出しがより柔軟になり、匿名クラス、プロパティの型宣言などが導入されています。

See all articles

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

function

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

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