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

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

coldplay.xixi

リリース： 2023-02-17 18:24:01

転載

1731 人が閲覧しました

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 サイトの他の関連記事を参照してください。