Question

我正在以一种简单的形式练习我的javascript初学者知识。我希望用户输入一个10位数的电话号码（如果该数字小于10或大于10，则我创建了无效的样式类，因此该用户只能输入10位数的电话号码）。另外，一旦他们输入10位数的电话号码，用户就应该能够点击“ +”并获得第二个第二个电话号码的框（当您单击+时，仅当用户输入10位数的电话时，第二个框才会出现。他的第一个电话号码）。我使用了if（）来验证电话号码，但是它似乎不起作用。以下是我的代码，可能有什么想法吗？

<!DOCTYPE html>
<html>
<head>
    <title>Numere de telefon</title>
    <style>
        .invalid {
            background-color: rgb(139,0,0,0.2);
            color: darkgreen;
            border: 1px green solid;
        }
    </style>
    <script>
        function minL(elem,event,nr){
            var v = elem.value; 
            if(v.length < nr ){
                elem.classList.add("invalid");
            } else if (v.length > nr) {
                elem.classList.add("invalid");
            } else {
                elem.classList.remove("invalid");
            }
        }

         function addInput(elem,event){
            event.preventDefault(); 
            var container = document.querySelector("#containerNrTel"); 
            if(minL(document.querySelector("[name=numarTelefon]"))){
                container.innerHTML += '<input type="text" placeholder="nr telefon" />'; 
            }

        }

    </script>
</head>
<body>
    <form>
    <fieldset>
        <legend>Cont nou</legend>
        <input type="text" placeholder="nume">
        <input type="text" placeholder="prenume">
        <input type="text" placeholder="nr telefon" name="numarTelefon" oninput="" onchange="minL(this,event,10);">
        <input type="button" value="+" onclick="addInput(this,event);">
        <div id="containerNrTel"></div>
        <input type="button" value="Submit">
    </fieldset>
    </form>    
</body>
</html>

预先感谢，约阿纳

Answer 1

有两个主要问题。

在addInput函数中对minL的调用没有正确数量的参数。

minL在addInput期望时不返回布尔值。

function minL(elem,event,nr){
    var v = elem.value; 
    if(v.length < nr ){
        elem.classList.add("invalid");
    } else if (v.length > nr) {
        elem.classList.add("invalid");
    } else {
        elem.classList.remove("invalid");
        return true;
    }
}

 function addInput(elem,event){
    event.preventDefault(); 
    var container = document.querySelector("#containerNrTel"); 
    if(minL(document.querySelector("[name=numarTelefon]"), event, 10)){
        container.innerHTML += '<input type="text" placeholder="nr telefon" />'; 
    }

}

验证用户的值长度（javascript）

1 个答案: