Javascript 在动态选择选项时使用jQuery验证表单

我是jQuery和JavaScript新手。我想验证表单，检查每个下拉选择列表上的不同条件，并在每个条件上显示自定义错误。我该怎么做？我试过了，但每次都失败了

以下是我的HTML代码：

<select name="forwardTo" id="forwardTo" onchange="numberLineTo(this.value)">
    <option name="none" value="0">Select</option>
    <option name="MobileNo" value="3" id="MobileNo">Mobile Number</option>
    <option name="character" value="1">Character</option>
</select>
<input name="carrierAddress" type="text" id="carrierAddress">
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" onclick="numberLineTo();"/></div>

挑选
手机号码
性格

这是我的剧本

function numberLineTo(){
    $("<span class='err'></span>").insertAfter("#carrierAddress");
    if($("#forwardTo").val() =='0'){
        $("#carrierAddress").unbind("keypress").hide();
        $('.err').empty();
        $('.err').html("Please Select any option");
    }

    if( $("#forwardTo").val() =='3')
    {
        $("#carrierAddress").show();
        $('.err').empty();

        $("#carrierAddress").bind("keypress",(function (e) {
            if(e.which == ""){
                $('.err').clear();
                $("#carrierAddress").show();
                $('.err').replaceWith("Please enter your phone number");
                return true;
            }
            //if the letter is not digit then display error and don't type anything
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                //display error message
                if(!isNaN(e.which)){
                    $('.err').empty();
                    $("#carrierAddress").show();
                    $('.err').empty().replaceWith("Please provide a valid phone number");
                    return true;

                }
                return false;
                }
            })
        );
    }

    if($("#forwardTo").val() =='1'){
        $("#carrierAddress").unbind("keypress");
        $("#carrierAddress").show();
        $('span').removeClass('.err');
    }
}

函数numberLineTo（）{
$（“”）之后插入（#carrierAddress）；
if（$（“#forwardTo”）.val（）='0'）{
$（“#carrierAddress”）.unbind（“keypress”）.hide（）；
$（'.err'）.empty（）；
$（'.err'）.html（“请选择任何选项”）；
}
if（$（“#forwardTo”）.val（）='3'）
{
$（“#carrierAddress”）.show（）；
$（'.err'）.empty（）；
$（“#carrierAddress”）.bind（“按键”），函数（e）{
如果（e.which==“”）{
$（'.err'）.clear（）；
$（“#carrierAddress”）.show（）；
$（'.err'）.replaceWith（“请输入您的电话号码”）；
返回true；
}
//如果字母不是数字，则显示错误，不键入任何内容
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
//显示错误消息
如果（！isNaN（e.which））{
$（'.err'）.empty（）；
$（“#carrierAddress”）.show（）；
$（'.err'）.empty（）.replaceWith（“请提供有效的电话号码”）；
返回true；
}
返回false；
}
})
);
}
if（$（“#forwardTo”）.val（）='1'）{
$（“#carrierAddress”）。解除绑定（“按键”）；
$（“#carrierAddress”）.show（）；
$（'span'）.removeClass（'err'）；
}
}

您就快到了，但可以对其进行清理并使其结构更好一些

HTML（删除了内联javascript事件）：

挑选
手机号码
性格

JavaScript

$("#carrierAddress").after($("<span class='err'></span>"));

function numberLineTo(){
    var val = $("#forwardTo").val();
    $("#carrierAddress").hide();
    $('.err').empty();
    if(val == '0'){
        $('.err').html("Please Select any option");
    }
    if(val == '3')    {
        $("#carrierAddress").show();       
    }
};
numberLineTo();

$("#forwardTo").on("change",function(e){
    numberLineTo();
});

$("input[type=submit]").on("click",function(e){
    numberLineTo();
    alert("do something!");
});

$("#carrierAddress").on("keypress",function(e){
    $('.err').empty();
    if (e.keyCode === 13) {// 'enter' key
        return;
    }
    //if the letter is not digit then display error and don't type anything
   if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       //display error message
       if(!isNaN(e.which)){
           $("#carrierAddress").show();
           $('.err').html("Please provide a valid phone number");
       }
   return false;
   }
});

$（“#carrierAddress”）。在（$（“”）之后；
函数numberLineTo（）{
var val=$（“#forwardTo”）.val（）；
$（“#carrierAddress”）.hide（）；
$（'.err'）.empty（）；
如果（val='0'）{
$（'.err'）.html（“请选择任何选项”）；
}
如果（val='3'）{
$（“#carrierAddress”）.show（）；
}
};
numberLineTo（）；
$（“#forwardTo”）。关于（“更改”，函数（e）{
numberLineTo（）；
});
$（“输入[type=submit]”）。在（“单击”按钮上，函数（e）{
numberLineTo（）；
警惕（“做点什么！”）；
});
$（#carrierAddress”）。在（“按键”，功能（e）{
$（'.err'）.empty（）；
如果（e.keyCode==13）{/'enter'键
返回；
}
//如果字母不是数字，则显示错误，不键入任何内容
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
//显示错误消息
如果（！isNaN（e.which））{
$（“#carrierAddress”）.show（）；
$（'.err'）.html（“请提供有效的电话号码”）；
}
返回false；
}
});

下面是演示：

---

这里有一个更好的完整版本：

HTML

顺便说一句，在盲目使用之前，你真的应该通过阅读一些文档或教程来学习

---

我知道jquery有一个名为“jquery.validate”的插件，可以帮助你做这类事情。。。不过，我从未使用过它。

非常感谢，很抱歉回复太晚。非常感谢，很抱歉回复太晚。

$("#carrierAddress").after($("<span class='err'></span>"));

function numberLineTo(){
    var val = $("#forwardTo").val();
    $("#carrierAddress").hide();
    $('.err').empty();
    if(val == '0'){
        $('.err').html("Please Select any option");
    }
    if(val == '3')    {
        $("#carrierAddress").show();       
    }
};
numberLineTo();

$("#forwardTo").on("change",function(e){
    numberLineTo();
});

$("input[type=submit]").on("click",function(e){
    numberLineTo();
    alert("do something!");
});

$("#carrierAddress").on("keypress",function(e){
    $('.err').empty();
    if (e.keyCode === 13) {// 'enter' key
        return;
    }
    //if the letter is not digit then display error and don't type anything
   if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       //display error message
       if(!isNaN(e.which)){
           $("#carrierAddress").show();
           $('.err').html("Please provide a valid phone number");
       }
   return false;
   }
});

<select name="forwardTo" id="forwardTo">
    <option value="0">Select</option>
    <option value="3" id="MobileNo">Mobile Number</option>
    <option value="1">Character</option>
</select>
<input name="carrierAddress" type="text" id="carrierAddress">
<span id="carrierAddress-error" class="err"></span>

<div style="margin-left:140px;">
    <input type="submit" name="submit" value="Submit" />
</div>

$(document).ready(function () {
    // Best practices when using reccurent jQuery objects
    var $forwardTo = $("#forwardTo"),
        $carrierAddress = $("#carrierAddress"),
        $carrierAddressError = $('#carrierAddress-error');
    // Others "global" variables
    var reg = /^\d+$/;

    $forwardTo.on('change', function () {
        var $that = $(this);
        // You should do a "switch" instead of several "if" statements
        if ($that.val() == '0') {
            $carrierAddress.hide();
            $carrierAddressError.text("Please Select any option");
        }
        if ($that.val() == '3') {
            $carrierAddress.show();
            $carrierAddressError.text("");
        }
        if ($that.val() == '1') {
            $carrierAddress.show();
            $carrierAddressError.removeClass('err'); // why ? 
        }
    });

    // Use 'input' event instead of 'keypress' which doesn't understand copy/paste for example
    $carrierAddress.on('input', function () {
        var $that = $(this);
        // trim() remove spaces on each side of the string
        if ($that.val().trim() == "") {
            $carrierAddressError.text("Please enter your phone number");
        }
        //if the string doesn't contain only digits then display error
        else if (!reg.test($that.val().trim())) {
            $carrierAddressError.text("Please provide a valid phone number");
        }
        else{
            $carrierAddressError.text("");
        }
    });
});