0

過去数年間、私はバックエンド開発に専念していたため、javascript と css のスキルが不足しています。私はサイトのウェブマスターとして志願しており、フォームの検証を改善したいと考えています (現在は何もありません)。
私の問題: 基本的に、いくつかの名前フィールド、電子メール アドレス、電話番号を含む 1 つのフォームがあります。フォームが送信されると、すべてのフィールドを検証します。データが無効な場合、そのフィールドのラベルの色を赤に変更したいと思います (Struts 検証と同様)。これを行う最も簡単な方法は何ですか?

編集: バックエンドの PHP 検証もあります。フロントエンドをより美しく、より使いやすくすることを目指しています。PHP 検証は別のサーバーにあります。バックエンドで検証が失敗すると、メッセージが表示され、ユーザーは [戻る] ボタンを使用する必要があります。元のページにリダイレクトして、無効なフィールドを表示したいと考えています。

4

6 に答える 6

1

ラベルが入力と同じレベルのDOM階層にあり、マークアップの入力のすぐ隣にあると仮定すると、次のようなことができます。

まず、HTMLの例をいくつか示します。

<html>
    <body>
        <form onsubmit="return validation()" action="submit.php" method="post">
            <label for="name">Name:</label>
            <input type="text" value="" id="name" />
            <label for="email">Email:</label>
            <input type="text" value="" id="email" />

            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

ご覧のとおり、すべての入力の前には、正しい属性を持つラベルが付いています。

さて、Javascriptについては、頭の中で説明します。

<script type="text/javascript">
    function validation() {
        //So we have a validation function.
        //Let's first fetch the inputs.
        name = document.getElementById("name");
        email = document.getElementById("email");

        //The variable error will increment if there is a validation error.
        //This way, the form will not submit if an error is found.
        error = 0; 

        //Now for validation.
        if(name.value.length < 6) {
            //We've found an error, so increment the variable
            error++;

            //Now find the corresponding label.
            nameLabel = name.previousSibling;

            //If we found the label, add an error class to it.
            if(nameLabel && nameLabel.for = name.id) {
                nameLabel.className = "error";
            }
        }

        ///////////////////
        //Do the same with the email...
        ///////////////////

        //Now, if there are no errors, let the form submit.
        //If there are errors, prevent it from doing so.
        return (error == 0) ? true : false;
    }
</script>

次に、CSSを追加します。

<style type="text/css">
.error {
  background-color: red;
}
</style>

編集-この種のソリューションは必要なかったと思いますが、サーバーに移動する前に検証する必要がある場合は、ここに移動します。:)

于 2008-12-31T17:34:55.927 に答える
1

サーバー側でページを作成するときは、すべてのフィールドにエラーをマークします。

<input type="text" name="phone_number" class="error_field">
   555-121
</input>

次に、ページの CSS に次のようなエントリを含めます。

input.error_field { color: #FFF; bgcolor: #C00; }

(ピリオドは「クラスセレクター」であり、クラス属性「error_field」を持つすべての入力に適用されることを意味します。入力タグに既にクラスを使用している場合は、要素に複数のクラスを指定できます。スペースを使用して区切ります。)

ページに色を付けるために Struts が生成するコードの種類を知りたい場合は、Firefox のFirebug拡張機能を使用するのが簡単な方法の 1 つです。

于 2008-12-31T17:27:17.017 に答える
0

他の人が示唆しているように、これを自分でまとめることができます。しかし、Strutsには独自のJavaScript検証があることを覚えているようです。サーバー側で実行されるのと同じチェックを実行するJavaScript関数を生成するように構成できます。ドキュメントを確認してください。必要に応じてカスタマイズできない場合もありますが、これは開始するための迅速な方法である可能性があります。

于 2008-12-31T17:43:49.917 に答える
0

Struts の検証はサーバー側で行われています。JavaScript 検証はクライアントで実行されます。クライアントがブラウザーで JavaScript をオフにしてもサーバー側の検証は引き続き機能するため、この違いは重要です (報告によると、約 10% のユーザーがオフにしています)。

できれば両方あるのがベスト。

于 2008-12-31T16:54:24.213 に答える
0

これまでストラットを使用したことはありませんが、javascript の有無にかかわらず、多くのフォーム検証を行っています。

私の意見では、JavaScript とサーバー側の検証の両方を常に行う必要があるため、誰にとっても機能するはずです。

サーバー側では、前述のglaziusf.myopenid.comのようなことを行う必要があります。それを赤で表示する要素にクラスを追加するだけです。

JavaScript (および ajax) では、サーバー側で使用する要素に同じクラスを動的に追加するだけです。

于 2008-12-31T18:18:55.493 に答える
0

JQuery や Prototype などの JavaScript フレームワークを学習することをお勧めします。JQuery を使用すると、フィルタリングされた要素から値を取得したり、CSS を変更したり、視覚効果を追加したりすることが非常に簡単になります。

あなたのサイトの PHP ロジックはよくわかりませんが、アクションがそれ自体に送信される場合は、同じページに検証を配置できますが、それが良い方法かどうかはわかりません。たとえば、次のように先頭に配置します。

if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...

PHP でリダイレクトするには、次のように言うだけです。

header("Location: THE_PAGE.php");

その前に何も出力してはいけませんが。ページにパラメーターを戻して (例: THE_PAGE.php?valMsg=1)、検証メッセージなどを表示するように指示することもできます。

于 2009-01-13T17:47:00.993 に答える