0

私はasp.net mvc Webサイトに取り組んでおり、次のような4dropdownsと4があります。textboxes

dialprefix1   callfromnumber1
dialprefix2   callfromnumber2
dialprefix3   callfromnumber3
dialprefix4   callfromnumber4

dialprefix1if value inの長さが1044になるように、各行をグループ化したいと思います。つまり、に基づいてcallfromnumber1検証を実行したいのですが、複数の行があります。textboxdropdown

これを使用して、テキストボックスに数値を許可しました

$(".phone").keydown(function (event) {
    // Allow: backspace, delete, tab, escape, and enter
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
            // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
            // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
        return;
    } else {
        // Ensure that it is a number and stop the keypress
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
        event.preventDefault();
        }
    }
});

そして、私は次のように長さを検証しています:

$("#DefaultCallFrom1").keypress(function () {
    if ($("#Dialprefix1").val() == "44") {
        if (this.value.substring(0, 1) == "0" && this.value.length == "10") {
            displayAlertMessage("You can not enter more characters");
            this.value.length <= 10
        }
        else {
            displayAlertMessage("You can not enter more characters");
            this.value.length <= 9
        }
    }
})

$("#DefaultCallFrom2").keypress(function () {
    if ($("#Dialprefix2").val() == "44") {
        if (this.value.substring(0, 1) == "0")
            return this.value.length <= 10
        else
            return this.value.length <= 9
    }
})

1）クラスに基づいてこれらを結合したいすべてのテキストボックスにはclass = phoneがあり、すべてのドロップダウンにはクラスdialprefixがあります。

2)。関連するドロップダウンの選択値が44の場合、番号が0,1,2,7,8で始まることを確認したい

マークアップは次のようになります。

<td style="padding-left: 1px">

<input type="text" value="1" readonly="readonly" name="srNo" id="srNo" disabled="disabled" class="tiny" style="text-align:right">
<select name="Dialprefix1" id="Dialprefix1" class="dialprefix">
    <option value="44">+44</option>
    <option value="001">+001</option>
    <option value="11" selected="selected">+11</option>
    <option value="12">+12</option>
    <option value="13">+13</option>
</select>

<span class="watermark_container" style="display: inline-block; position: relative;">
<span class="watermark" style="position: absolute; display: block; font-family: MS Shell Dlg; font-size: 13.3333px; color: rgb(153, 153, 153); left: 4px; top: 0px; height: 20px; line-height: 20px; text-align: left; pointer-events: none; opacity: 0.6;">
    Click here to add your phone number.
</span>
<input type="text" value="" title="Click here to add your phone number." name="DefaultCallFrom1" id="DefaultCallFrom1" class="textarea normal jq_watermark phone" autocomplete="off" data-jq-watermark="processed">
</span>
<br>

<input type="text" value="2" readonly="readonly" name="srNo" id="srNo" disabled="disabled" class="tiny" style="text-align:right">
<select name="Dialprefix2" id="Dialprefix2" class="dialprefix">
    <option value="44">+44</option>
    <option value="001">+001</option>
    <option value="11" selected="selected">+11</option>
    <option value="12">+12</option>
    <option value="13">+13</option>
</select>

<span class="watermark_container" style="display: inline-block; position: relative;">
<span class="watermark" style="position: absolute; display: block; font-family: MS Shell Dlg; font-size: 13.3333px; color: rgb(153, 153, 153); left: 4px; top: 0px; height: 20px; line-height: 20px; text-align: left; pointer-events: none;">
    Click here to add your phone number.
</span>
<input type="text" value="" title="Click here to add your phone number." name="DefaultCallFrom2" id="DefaultCallFrom2" class="textarea normal jq_watermark phone" autocomplete="off" data-jq-watermark="processed">
</span>
<br>
4

2 に答える 2

0

各入力に共通のクラスを指定します (マークアップには表示されません)。input対応するものに一致させるには、いくつかの方法があります。たとえば、それらを分離するような他の要素がなく、html ツリーに並んでいる場合selectなどです。prev()next()<br>

HTML ツリーをトラバースするさまざまな方法を学ぶことは、jQuery コードを簡素化し、トラバースを容易にするマークアップを作成するのに役立ちます。以下では ID は必要ありません。

index()マークアップが不明なので、それらを一致させるために使用します。DefaultCallFromのclassNameとして使用していinputます。

var $inputs= $(".DefaultCallFrom"), $selects=$('.dialprefix');

$inputs.keypress(function () {
     /* get index of active input and use to match select*/
     var idx= $inputs.index( this ), $sel=$selects.eq( idx );
    if ($sel.val() == "44") {
        if (this.value.substring(0, 1) == "0" && this.value.length == "10") {
            displayAlertMessage("You can not enter more characters");
            this.value.length <= 10
        }
        else {
            displayAlertMessage("You can not enter more characters");
            this.value.length <= 9
        }
    }
})

API リファレンス

http://api.jquery.com/index/

http://api.jquery.com/prev/

http://api.jquery.com/next/

于 2013-01-12T14:28:24.567 に答える
0

これがあなたのコードの作業バージョンです。代わりにこれを試してください$("#DefaultCallFrom1").keypress(function ()：

$(".phone").keypress(function(evt) {
    // Find the index
    index = ($(this).attr('id')).split("DefaultCallFrom")[1];

    // Check Dialprefix
    if ($("#Dialprefix" + index).val() == "44") {
        // 0 prefix
        if (this.value[0] == 0) {
            if(this.value.length == 10) {
                alert("You can not enter more characters...");
                evt.preventDefault();
            } 
        } else {
            if(this.value.length == 9) {
                alert("You can not enter more characters...");
                evt.preventDefault();
            }
        }
    }
});
于 2013-01-12T14:29:57.920 に答える