2

私は自分の Web サイト用に検証済みの登録フォームを作成しようとしていますが、現在、練習用にデモをコーディングしています。JavaScriptを使用してフォームを検証できました。ただし、JSを無効にできるため、クライアント側とサーバー側の両方でフォームを検証する必要があることをどこかで読みました。すべての JavaScript 検証が満たされていない場合に送信ボタンを単純に無効にする方法があるかどうか疑問に思っていました (eBay が登録フォームで同様の方法を使用していることに気付きました)。

これは私が今のところいるところです：

<script type="text/javascript">
function validateEmail(email) { 

    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(re.test(email)) {
        document.getElementById('result').innerHTML = '<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/> Valid';
    } else {
        document.getElementById('result').innerHTML = '<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/> Invalid';
    }
} 
function validatePass(pass){
    if(pass.length < 6){
        document.getElementById('pass-result').innerHTML='<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/>Your password must be at least 6 characters';
    }else{
        document.getElementById('pass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>valid';
    }
}
function validateCPass(cpass){
    var pass = document.getElementById('pass').value;

    if(cpass != pass){
        document.getElementById('cpass-result').innerHTML="Passwords must match";
    }else{
        document.getElementById('cpass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>';
    }   
}
</script>
</head>
<body>
    <form action="practice.php" method="post">
        e-mail:<br/><input id="email" type="text" onblur="validateEmail(this.value)" /><span id="result"></span>
        <br/><br/>Password:<br/><input type="password" id="pass" onblur="validatePass(this.value)"><span id="pass-result"> </span>
        <br/><br/>Confirm Password:<br/><input type="password" id="confpass" onblur="validateCPass(this.value)"> <span id="cpass-result"></span>
        <br/><input type="submit">
    </form>
</body>
4

4 に答える 4

7

いいえ、それはいくつかの理由で不可能です:

  • アクセシビリティ。顧客のブラウザーが Javascript をサポートしていないか、ユーザーが Javascript を無効にしている可能性があります (そうです、そうしているユーザーもいます)。

  • 安全。Web アプリケーションは、HTTP インターフェースをインターネット全体に公開します。そもそも HTTP リクエストを送信するためにブラウザを用意する必要さえありません! したがって、バックエンドはすべての HTTP リクエストを信頼できないものとして扱い、検証する必要があります。これは、信頼できないソースからのすべてのデータに当てはまります。

したがって：

サーバー側の検証は、適切な Web アプリケーションにとって必須です。

クライアント側の検証は、より迅速なフィードバックを提供することでユーザー エクスペリエンスを向上させるために存在する UI 拡張機能です。

于 2012-07-02T14:18:22.877 に答える
2

デフォルトでボタンを無効にしてから、JavaScript で再度有効にすることができます。ただし、クロスサイト スクリプト インジェクションを使用する可能性があるか、より現実的には FireBug や開発者ツールに組み込まれているブラウザーのデフォルトの 1 つを使用して、ユーザーが自分で再度有効にすることを止めることはできません。

ユーザー エクスペリエンスとシステムの整合性とセキュリティの両方のために、クライアント側とサーバー側の両方の検証を行うことを強くお勧めします。単に両方の時間がない場合は、サーバー側が確実に優先されます。クライアント側の検証は、ユーザーにとってより良いものにすることを目的とした細やかさです。悲しいことに、コードを壊すことに関して、ユーザーはあなたのコードについて同じように感じないかもしれません。

常にサーバー側の検証を行います。:)

于 2012-07-02T14:19:03.690 に答える
1

サーバー内のものもチェックする理由は、それらのフォームがアプリケーションに存在するか、ブラウザーで無効になっているかに関係なく、悪意のあるユーザーが巧妙な POST または GET 要求をサーバーに手動で送信できるためです。この問題を解決するには、フォームを無効にするだけでは不十分です。

ただし、JS 以外のブラウザでフォームを無効にしたい場合は、デフォルトでフォームを無効にし、JS で有効にすることができます。

于 2012-07-02T14:19:25.293 に答える
0

車輪を再発明する必要はありません。JavaScript を使用して検証するためのツールはたくさんあります。たとえば、jQuery 検証プラグインを確認してください。数行のコードでフォームを検証できます。

http://docs.jquery.com/Plugins/Validation

サーバー側の検証に関しては、常にサーバー上のデータを検証する必要があります。JavaScript 検証は、ユーザーのミスを防ぐことを目的としていますが、システムにセキュリティを提供するものではありません。

于 2012-07-02T14:19:34.973 に答える