0

私はjQueryが初めてです。

キャプチャ検証付きのhtml連絡フォームがあります。

フォームは jQuery を使用して、名前、電子メール アドレス、およびメッセージを検証します。

しかし、キャプチャ検証の統合に問題があります。

verifyimage.phpキャプチャは、次のコードを使用して(によって) 生成されます。

<?php
session_start();
error_reporting( 0 );
if( !function_exists( "imagecreatefrompng" ) )
{
    exit( "You need to recompile with the GD library included in PHP for this feature to be able to function" );
}
$alphanum = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
$rand = substr( str_shuffle( $alphanum ), 0, 6 );
$image = imagecreatefrompng( "../images/verify.png" );
$textColor = imagecolorallocate( $image, 150, 150, 150 );
imagestring( $image, 5, 14, 22, $rand, $textColor );
$_SESSION['image_random_value'] = md5( $rand );
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )." GMT" );
header( "Cache-Control: no-store, no-cache, must-revalidate" );
header( "Cache-Control: post-check=0, pre-check=0", false );
header( "Pragma: no-cache" );
header( "Content-type: image/png" );
imagepng( $image );
imagedestroy( $image );
?>

フォームの HTML は次のとおりです。

<!-- Contact Form -->
<div id="contactForm">
        <form action="/contact.php" method="post">
        <div class="oneThird">
            <div class="row">
                <label for="contactName">Full Name</label>
                <input id="contactName" name="contactName" type="text" />
            </div>
            <div class="row topMargin">
                <label for="contactEmail">Email Address</label>
                <input id="contactEmail" name="contactEmail" type="text" />
            </div>
                        <div class="row topMargin">
                <label for="contactVerify">Captcha</label>
                <input style="background-image: url(/php/verifyimage.php);" id="contactVerify" name="contactVerify" type="text" />
            </div>
                    </div>
        <div class="twoThird lastColumn">
            <div class="row">
                <label for="contactMessage">Message</label>
                <textarea id="contactMessage" name="contactMessage" cols="10" rows="9"></textarea>
            </div>
        </div>
        <div class="clearfix">
        </div>
        <button type="submit" class="colorButton">Send Message</button>
    </form>
    </div>

また、jQuery には、フォーム名、電子メール、およびメッセージ セクションの検証に関連する次のコードが含まれています。

// Contact
    if ($('#contactForm').length != 0)
    {
        var labelName = $('#contactForm label[for="contactName"]').text();
        var labelEmail = $('#contactForm label[for="contactEmail"]').text();
        var labelMessage = $('#contactForm label[for="contactMessage"]').text();
        var emailPattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

        if ($('#contactVerify').length != 0)
        {
            var labelVerify = $('#contactForm label[for="contactVerify"]').text();
        }

        $('#contactForm button').click(function()
        {
            if ($('#contactName').val() == '')
            {
                $('#contactForm label[for="contactName"]').addClass('error').text(labelName + ' is required');
            }
            else
            {
                $('#contactForm label[for="contactName"]').removeClass('error').text(labelName);
            }

            if ($('#contactEmail').val() == '')
            {
                $('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is required');
            }
            else if (!emailPattern.test($('#contactEmail').val()))
            {
                $('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is invalid');
            }
            else
            {
                $('#contactForm label[for="contactEmail"]').removeClass('error').text(labelEmail);
            }

            if ($('#contactMessage').val() == '')
            {
                $('#contactForm label[for="contactMessage"]').addClass('error').text(labelMessage + ' is required');
            }
            else
            {
                $('#contactForm label[for="contactMessage"]').removeClass('error').text(labelMessage);
            }

            if (typeof labelVerify != 'undefined')
            {
                if ($('#contactVerify').val() == '')
                {
                    $('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is required');
                }
                else
                {
                    $('#contactForm label[for="contactVerify"]').removeClass('error').text(labelVerify);
                }

            }

            if ($('#contactForm label.error').length == 0)
            {
                $('#contactForm form').append('<input type="hidden" value="1" name="contactValid" />');
            }
            else
            {
                return false;
            }
        });
    }

キャプチャ検証をどのように実装するかについて、私は立ち往生しています。contact.php投稿先のフォームに含めますか?

または、フォームが投稿される前にキャプチャを検証できますか? メールアドレスはどうですか？

私は追加しようとしました：

<?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (md5($_POST['contactVerify']) == $_SESSION['image_random_value']) {
        // contactVerify verification is Correct. Do something here!
        $cap = 'Eq';
    } else {
        // contactVerify verification is wrong. Take other action
        $cap = '';
    }
}
?>

HTML フォームの先頭に。また、次のように追加します。

var capch = '<?php echo $cap; ?>';
                if(capch != 'notEq'){
                    if(capch == 'Eq'){
        // My PHPMailer script //
                    }
                    else{
                        $('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is invalid');
                    }
                }                

            });

スクリプトとして。しかし、喜びはありません。キャプチャが無効かどうかに関係なく、フォームが送信されます。

どんな助けでも感謝します。

4

1 に答える 1

0

PHPの$_SESSIONにキャプチャを保存し、ローカル検証に関係なくチェックする必要があります。

次に、ローカルキャプチャ検証を使用することがめったにない理由は、サーバーへの「チェック」が必要になるためです。スクリプトはサーバーに正しいかどうかを尋ね、正しくないかどうかをユーザーに通知します（そうでない場合、Webブラウザーはどんなコーダーもこれをつかんでそれを悪用する可能性があるので、目的を打ち負かすキャプチャの値を知っています）。

非同期フォーム送信を使用することをお勧めします（ページを更新せずに送信されるフォームを非表示にし、ページ全体を/contact.phpにリロードする代わりに、javascriptを使用してフォームを送信します。次に、HTTP応答を次のいずれかにします。 「成功」または失敗した理由がPHPによって返されます。クライアントが失敗応答を受信すると、フォームが再度表示されます（更新がなかったため、データはフィールドに残っていることに注意してください）、新しいキャプチャを指定します誰かが同じキャプチャを常にポーリングして、ユーザーに自分の行ったことが失敗したことを示すことができないようにするためです。

手元にある質問はさておき、 AngularJSではこれらすべてが非常に簡単です。私はそれを強くお勧めします。

これがお役に立てば幸いです。

于 2013-02-04T21:02:29.200 に答える