0

我正在研究 asp.net mvc 网站，我有 4 个dropdowns和 4 个textboxes这样的：

dialprefix1   callfromnumber1
dialprefix2   callfromnumber2
dialprefix3   callfromnumber3
dialprefix4   callfromnumber4

我想对每一行进行分组，以便如果值 indialprefix1则长度为 10。意味着我要执行基于的验证并且有多行。44callfromnumber1textboxdropdown

我用它来允许文本框中的数字

$(".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）我想根据类组合这些所有文本框都有类=电话，所有下拉菜单都有类拨号前缀。

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到它的对应项select，例如使用prev()或者next()如果它们在 html 树中并排，没有其他元素，比如<br>将它们分开。

学习遍历 html 树的各种方法将有助于简化 jQuery 代码并创建使遍历更容易的标记。请注意，以下内容不需要任何 ID。

index()由于标记未知，我将使用它们来匹配它们。我使用DefaultCallFromas 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 回答