Question

当我进入动态添加的文本框时，如何检查URL是否正确。

这里t3作为输入标签的id给出，但这仅适用于第一个动态添加的文本框而不适用于其他文本框。

如何验证下一个动态添加的文本框中存在的其他网址？

<script type="text/javascript">
function GetDynamicTextBox(value){
return '<Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enter the URL : </label>' +
 '<input name = "habits" type="text" id = "t3" value = "' + value + '" />' +
        '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick = "RemoveTextBox(this)" /><br><br>'
}
function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}

function RemoveTextBox(div) {
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
    var html = "";
    for (var i = 0; i < values.length; i++) {
        html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
    }
    document.getElementById("TextBoxContainer").innerHTML = html;
}
}
window.onload = RecreateDynamicTextboxes;
</script>



<html>
<head>
<title>T-SUMM</title>


<script type="text/javascript">

        function check()
        {
            if (document.getElementById('t1').value==""
             || document.getElementById('t1').value==undefined)
            {
                alert ("Please Enter a Query");
                return false;
            }                

            var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
            if(!regex .test(document.getElementById('t2').value)||!regex .test(document.getElementById('t3').value)) 
            {
                    alert("Please enter valid URL.");
                    return false;
            } 

            return true;
        }

    </script>

</head>
<body>

<center>
<form method="Post" action="./result.jsp">
<table>
<br><br><Label> Enter a Query :  &nbsp;</label>
<input name='habits' id='t1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <br><br>
<Label>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter the URL :  </label>
<input name='habits' id='t2'>
&nbsp;&nbsp;<input id="btnAdd" type="button" value="add another URL"     onclick="AddTextBox()" /><br><br>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>

<input type="submit" name="submit" onclick="return check();"> 

</table>
</form>


</body>
</html>

Answer 1

HTML - index.html

<html>
<head>
<title>T-SUMM</title>

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">

        function check()
        {



            if (document.getElementById('t1').value==""
             || document.getElementById('t1').value==undefined)
            {
                alert ("Please Enter a Query");
                return false;
            }                

            var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
            var boxes = document.getElementsByTagName('input');
            for(i = 0; i < boxes.length; i++) {
                if(boxes[i].type == "text" && boxes[i].className==="urls" && !regex.test(boxes[i].value)) {
                    alert("Please enter valid URL. Error in Text Box "+boxes[i].value);
                    return false;
                }
            }

            return true;
        }

    </script>

</head>
<body>

<center>
<form method="Post" action="./result.jsp">
<table>
<br><br><Label> Enter a Query :  &nbsp;</label>
<input name='habits' id='t1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <br><br>
<Label>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter the URL :  </label>
<input name='habits' class="urls" id='t2'>
&nbsp;&nbsp;<input id="btnAdd" type="button" value="add another URL"     onclick="AddTextBox()" /><br><br>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>

<input type="submit" name="submit" onclick="return check();"> 

</table>
</form>


</body>
</html>

JS - script.js

function GetDynamicTextBox(value){
return '<Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enter the URL : </label>' +
 '<input name = "habits" type="text" class="urls" value = "' + value + '" />' +
        '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick = "RemoveTextBox(this)" /><br><br>'
}
function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}

function RemoveTextBox(div) {
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
    var html = "";
    for (var i = 0; i < values.length; i++) {
        html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
    }
    document.getElementById("TextBoxContainer").innerHTML = html;
}
}
window.onload = RecreateDynamicTextboxes;

Answer 2

我认为你可以先尝试添加＆＃34; onchange＆＃34; ＆＃34; TextBoxContainer＆＃34;的处理程序div和user event.target或event.srcElement来标识它是否是触发＆＃34; onchange＆＃34;的文本框。事件。如果触发器dom正是你想要的那个，那么你可以尝试验证它的值，如果不是，你就不需要做任何事情了。如果这样做，那么剩下的事情就是简单地向容器元素添加/删除文本框。以下是一些可能有用的示例代码：

<script type="text/javascript">
    var _container = document.getElementById('TextBoxContainer');
    function add(){
        var _txt = document.createElement("INPUT");
        _txt.type = "text";
        _container.appendChild(_txt);
    }

    _container.onchange = function(event){
        var _dom = event.target || event.srcElement;
        if(_dom && _dom.tagName === "INPUT" && _dom.type === "text"){
            //alert(_dom.value);
            //You can validate the dom value here
        }
    };

    document.getElementById('add').onclick=function(){
        add();
    };
</script>

如何在动态添加的文本框中验证URL

2 个答案: