如何在動態添加的文本框中驗證URL

當我將進入動態添加的文本框時，如何檢查URL是否正確。如何在動態添加的文本框中驗證URL

這裏t3是作爲輸入標記的id給出的，但是它僅適用於第一個動態添加的文本框而不適用於其他文本框。

如何驗證顯示在下一個動態添加的文本框中的另一個URL？

<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>

來源

2017-03-17 sanjay gupta

他的問題是添加驗證動態添加的元素......它不僅關於URL驗證。 @gyre –

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;

來源

2017-03-17 06:09:24

非常感謝你 –

我覺得你可以先嚐試「的onchange」處理程序添加到「TextBoxContainer」 DIV和用戶event.target或event.srcElement來標識它是否是觸發「onchange」事件的文本框。如果觸發器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>

來源

2017-03-17 06:14:49

如何在動態添加的文本框中驗證URL

回答

相關問題