1

LiveValidation は、データを検証するための JavaScript ライブラリです。ユーザーが情報を入力するときにフォームを検証するために使用しています。現時点では、表示される検証メッセージは次のように設定されています。

var username = new LiveValidation('username', { validMessage: 'Valid Username.', wait: 500});

ただし、「有効なユーザー名」とは変更したいと思います。緑の目盛り画像を表示するだけです。有効なメッセージ領域の CSS を次のように変更して、これを実行しようとしました。

.LV_valid
{
    background-image: url('green_tick.gif');
    font-size:10px;
    color:#33CC33;
}

これにより、印刷されるメッセージ全体に緑色の目盛りが表示されます。画像は 11x11 しかないため、約 5 ～ 6 個の画像に収まります。有効なメッセージを削除しようとしましたが、LiveValidation.js ファイルからデフォルトの「Thankyou」メッセージが出力されます。デフォルトのメッセージも空白に変更してみましたが、何も表示されません。また、画像の場所をメッセージとして使用しようとしましたが、これにより実際の場所のテキストが表示されました。

テキストの代わりに画像を表示する方法を知っている人はいますか?

ここのライブラリを参照してください: http://livevalidation.com/

4

4 に答える 4

1

このCSSはあなたが望むことをするはずです：

.LV_valid
{
    background-image: url('green_tick.gif');
    width: 0;
    height: 0;
    padding: 11px 11px 0 0;
    overflow: hidden;
}

説明：これらの幅、高さ、およびオーバーフローの値は、要素のすべてのコンテンツを非表示にし、パディング値は、コンテンツを表示できないように11x11のスペースを追加しますが、背景は表示します。

jsFiddle（もちろん別の画像を使用）：http：//jsfiddle.net/uqRQp/

于 2012-05-31T08:51:48.893 に答える
1

background-repeat: no-repeatテキストを見えなくする何かと組み合わせます。

.LV_valid
{
    /* This ensures the element is displayed as a block-level element
    so that all the following CSS rules apply. */        
    display: inline-block;          

    /* This displays your image, but only once. */
    background-image: url('green_tick.gif');
    background-repeat: no-repeat;

    /* This pushes the text out of the way so it can't be seen. */
    height: 0px !important;
    height: /**/ 11px; /* IE consistency hack */
    padding-top: 11px;
    overflow: hidden;
}
于 2012-05-31T09:02:02.740 に答える
0

この投稿を復活させて申し訳ありません..しかし、それを必要とする人のための答えがあります. それは私のために働く...

.LV_valid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('right.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

.LV_invalid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('wrong.png');
    background-repeat: no-repeat;
    overflow: hidden;
}
于 2013-06-25T18:13:24.433 に答える
0

このリンクをチェックしてください：http://andreaslagerkvist.com/jquery/live-validation/#jquery-plugin-example-code

jQuery('#jquery-live-validation-example').liveValidation({
validIco:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-valid.png', 
invalidIco: WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-invalid.png', 
required:    ['name', 'email', 'foo'], 
fields:        {foo: /^\S.*$/}

});

これは jQuery Live Validation と呼ばれる検証用の jquery プラグインです

于 2012-05-31T09:01:14.343 に答える