2

入力フィールドの横にメッセージを表示する入力フィールドの検証を作成しようとしています。ご覧のとおり、ユーザーは 500 未満または 800 を超える値を入力できません。

<input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/>
<span class="paymentalert"></span>

私はまだ学んでいるので、私のjavascriptを許してください。

$(function(){
    var min = 500.00;
    var max = 800.00;
    if ("#amount" < 500.00){
         return ("Your payment must be between £500 and £800");
        else if ("#amount" > 800.00)
         return ("Your payment must be between £500 and £800");
    else return false;
    };

Stackoverflow の例を使用しようとしていますが、どこにも行きません。

4

3 に答える 3

5

開始するに"#amount"は、単なる文字列です。必要なのは、 of を持つ要素の値idですamount。"#amount"はその要素の正しいセレクタですが、実際に選択するには jQuery 関数に渡す必要があります。そう：

var amountInput = $("#amount");

これにより、テキスト入力要素を含む jQuery オブジェクトが得られます。ここで、その入力の値が必要なので、.val()その jQuery オブジェクトで関数を呼び出す必要があります。ただし、テキスト入力の値は文字列として保存されるため、数値として使用する前に数値に変換する必要があることに注意してください。

var amount = parseFloat(amountInput.val(), 10);

全体：

var min = 500.00;
var max = 800.00;
var amountInput = $("#amount");
var amount = parseFloat(amountInput.val(), 10);
if (amount < 500.00){
     return ("Your payment must be between £500 and £800");
else if (amount > 800.00)
     return ("Your payment must be between £500 and £800");
else return false;

$(document).ready(function() {...})現在、呼び出し内でコードを呼び出していますが$(function() {...})、これは省略形です。そのため、ページが「ロード」された直後に実行されます (実際には、DOM の構築が完了したら、画像などのロードが完了する前に実行されます)。ユーザーが値を入力する時間がないため、これはおそらくあまり役​​に立ちません。

id代わりに、イベントにバインドして、おそらくof の付いたボタンをクリックしますvalidate。

$('#validate').on('click', function(e) {
    // code above here
});

また、いくつかの入門用 jQuery チュートリアルを読むことをお勧めします。

于 2013-02-12T16:30:38.827 に答える
1

現在、dom がロードされるとすぐにこの関数を 1 回実行しており、再度実行していません。入力が更新されたときに実行する必要があります。blurおそらく、この要素を調べたいと思うでしょう: http://api.jquery.com/blur/

また、文字列「#amount」を数値と比較しています。次のようにフィールドの値を比較する必要があります。

if (parseFloat($("#amount").val(),10) < 500.00){
于 2013-02-12T16:32:39.890 に答える
1

デモを参照してください。

$("#amount").bind("keyup keydown", function() {
    var amount = parseFloat($(this).val());
    if (amount) {
        if (amount < 500 || amount > 800) {
            $("span.paymentalert").html("Your payment must be between £500 and £800");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});
于 2013-02-12T16:34:58.357 に答える