如何驗證使用JavaScript的克隆輸入？

我在使用標識元素時遇到問題。基本上，我想創建一個簡單的HTML表單，用戶可以在其中輸入與某個代碼相關的電話號碼 - 需要驗證併發送到某個文件夾。如何驗證使用JavaScript的克隆輸入？

但是，我想給用戶輸入他們想要的電話號碼的可能性。所以對我來說使用克隆方法似乎是合乎邏輯的。然而，使用這種方法的消極方面是身份總是相同的。換句話說，如果電話號碼輸入錯誤，我不能將用戶引用到與驗證規則不相符的輸入文本。

我已經嘗試了幾件事情，但我根本不知道如何通過1遞增標識元素'Tel'，或者驗證每個輸入文本。

下面你可以找到我的代碼。我使用getElementsByName方法，因爲Firefox會自動爲每個輸入名稱分配一個遞增的數字。但是，如果我能找到一種方法來爲每個使用的輸入文本增加1的身份，我寧願這種工作方式。我對每一個建議都開放，但我更喜歡使用普通的JavaScript，因爲我不熟悉JQuery。

Thx提前。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>SMS</title> 
</head> 
<body> 

<script type="text/javascript"> 

var counter = 0; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes 
    for (var i=0;i<newField.length;i++) { 
     var theName = newField[i].name; 
     if (theName) 
      newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
} 

window.onload = moreFields; 


function checkPhone() { 

var x=document.getElementsByName("Tel").length; 


var TotTel = new Array(); 

for(i = 0; i < x; i++) 
{ 
TotTel[i] += document.getElementsByName('PhoneNumber')[i].value; 


if(TotTel[i] == "" || TotTel[i] == null) 
{ 
alert("Please enter a phone number"); 
return false; 
} 

else if(isNaN(TotTel[i])) 
{ 
    alert("You can only enter numbers"); 
    return false; 
} 
} 
alert("Validation ok"); 
return true; 
} 

</script> 


<div id="readroot" style="display:none"> 

    <input type="button" value="Remove field" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 

    Phone number: <input name="PhoneNumber" class="Tel" id="Tel" /> 

    SMSCode: <select name="SMSCodes"> 
     <option>Codes</option> 
     <option value="B2BNL"> B2BNL </option> 
     <option value="B2BFR"> B2BFR </option> 
     <option value="B2BEN"> B2BEN </option> 
     <option value="B2CNL"> B2CNL </option> 
     <option value="B2CFR"> B2CFR </option> 
     <option value="B2CEN"> B2CEN </option> 
     <option value="AMNL"> AMNL </option> 
     <option value="AMFR"> AMFR </option> 
     <option value="PMNL"> PMNL </option> 
     <option value="PMFR"> PMFR </option> 
     <option value="PMPNL"> PMPNL </option> 
     <option value="PMPFR"> PMPFR </option> 
     <option value="BWAYAM"> BWAYAM </option> 
     <option value="BWAYPM"> BWAYPM </option> 
     <option value="BWAYPMP"> BWAYPMP </option> 
     <option value="BWAY18"> BWAY18 </option> 
     <option value="SPEOSNL1114"> SPEOSNL1114 </option> 
     <option value="SPEOSFR1114"> SPEOSFR1114 </option> 
     <option value="SPEOSNL1417"> SPEOSNL1417 </option> 
     <option value="SPEOSFR1417"> SPEOSFR1417 </option> 
     <option value="SPEOSNL1721"> SPEOSNL1721 </option> 
     <option value="SPEOSFR1721"> SPEOSFR1721 </option> 
    </select><br /><br /> 
</div> 

<form name="SMSForm" action="" onsubmit="checkPhone()" method="post"> 

    <span id="writeroot"></span> 

    <input type="button" onclick="moreFields()" value="More Phone numbers" /> 
    <input type="submit" value="Send" /> 

</form> 

</body> 
</html>

來源

2013-06-27 user2524776

你的代碼有多個錯誤，如果你修復它，它應該可以工作。

var x=document.getElementsByName("Tel").length;

上述表達式評估爲0，因爲「Tel」是文本字段的ID。

for(i = 0; i < x; i++){

請注意，火狐分配1至第一文本框，不是0

TotTel[i] += document.getElementsByName('PhoneNumber')[i].value;

的代碼中的錯誤上面一行，因爲它只返回名稱完全「******中國」的節點，而不是「 PhoneNumberSomething」。你可以嘗試像

TotTel[i] += document.getElementsByName('PhoneNumber'+i)[0].value;

例如PhoneNumber1是一個唯一的名稱，所以該方法返回一個元素數組。請注意，用戶可以添加更多的電話號碼字段，然後刪除第一個。結果數字序列將爲1,3,4 ...但PhoneNumber2不存在。

我雖然有兩種方法來處理這個問題。

第一個是構建一個數組或類似的存儲節點，當你克隆它並在用戶刪除時從數組中刪除，這樣你就可以從該數組中找到任何克隆的節點。

arr[counter] = document.getElementById('readroot').cloneNode(true);

第二種方法使用的jquery http://api.jquery.com/attribute-contains-selector/

$("form input[name*=PhoneNumber]")

上述選擇器將選擇與含有******中國形式名稱的所有文本框。

來源

2013-06-27 13:16:26 kftse

如何驗證使用JavaScript的克隆輸入？

回答

相關問題