驗證輸入使用javascript

Question

我有一個相當大的形式，它有8個領域進入書籍。 現在爲用戶添加更多的書籍，有一個按鈕添加更多的書籍，點擊其中一個JavaScript函數被調用，8個字段中的7個被複制。

用戶可以添加最多6本書，並且動態創建的所有輸入字段都將其名稱作爲數組。我能夠發佈它們並存儲在一張表中，現在我想使用javascript驗證它們。

我一直嘗試做這個，因爲一個星期，是一個新的Javascript。請幫幫我。

我的JavaScript代碼

function addInput(divName){ 
var bname1 = new Array(); 
var abname1 = new Array(); 
var cost1 = new Array(); 
var num1 = new Array(); 

if (counter == limit) 
{ 
     alert("You have reached the limit of adding " + counter + " inputs"); 
} 
else 
{ 
    var newdiv = document.createElement('div'); 
     newdiv.innerHTML ="<table>"+ "<tr align='right'>" + "<td>"+ " Name of book" + (counter + 1) + " " +" : <input type='text' name='bname1[]' > "+"</td>" + "</tr>"+"<tr align='right'>"+ "<td>"+" Name of Authour"+(counter + 1)+" "+": <input type='text' name='aname1[]'>"+"</td>"+"</tr>"+"<tr align='right'>"+"<td>"+"Publisher"+(counter+1)+" "+": <input tyme='text' name='pub1[]'>"+"</td>"+"</tr>"+ "<tr align='right'>" +"<td>"+ "ISDN Number " + (counter + 1) +" "+ ": <input type='text' name='isdn1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" +"<td>"+ " Edition " + (counter + 1) + " "+": <input type='text' name='edi1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" + "<td>"+ "Price"+(counter + 1) +" "+ " :<input type='number' name='cost1[]'>"+"</td>"+"</tr>"+"<tr align='right'>" + "<td>"+ "Number of copies"+(counter + 1) +" "+ ": <input type='number' name ='num1[]'> "+"</td>" + "</tr>"+ "</table>"; 

    // alert("counter +1 is "+counter+1); 

     document.getElementById(divName).appendChild(newdiv); 
    counter=counter+1; 



} 
} 

有記名錶決的HTML形式，這一切都被添加到。 請幫忙！ thanx提前..

Answer 1

這裏是你的解決方案。 http://codebins.com/codes/home/4ldqpbq

HTML

<div id="testDiv"> 
</div> 

<button onclick="addInput('testDiv')"> 
    Add New Items 
</button> 
<button onclick="validate('testDiv')"> 
    Validate 
</button> 

的JavaScript

var counter = 0; 
var limit = 6 

function addInput(divName) { 
    var bname1 = new Array(); 
    var abname1 = new Array(); 
    var cost1 = new Array(); 
    var num1 = new Array(); 

    if (counter == limit) { 
     alert("You have reached the limit of adding " + counter + " inputs"); 
    } else { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = "<table>" + "<tr align='right'>" + "<td>" + " Name of book" + (counter + 1) + " " + " : <input type='text' name='bname1[]' > " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Name of Authour" + (counter + 1) + " " + ": <input type='text' name='aname1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Publisher" + (counter + 1) + " " + ": <input tyme='text' name='pub1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "ISDN Number " + (counter + 1) + " " + ": <input type='text' name='isdn1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Edition " + (counter + 1) + " " + ": <input type='text' name='edi1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Price" + (counter + 1) + " " + " :<input type='number' name='cost1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Number of copies" + (counter + 1) + " " + ": <input type='number' name ='num1[]'> " + "</td>" + "</tr>" + "</table>"; 

     // alert("counter +1 is "+counter+1); 
     document.getElementById(divName).appendChild(newdiv); 
     counter = counter + 1; 



    } 
} 


    function validate(divName) { 
     var container = document.getElementById(divName).getElementsByTagName("input"); 

     for (var len = container.length, i = 0; i < len; i++) { 
      // if only requried validation 
      if (container[i].value == "") { 
       container[i].style.borderColor = "red" 
      } else { 
       container[i].style.border = "" 
      } 


      //if you want saperate validation for each 
      switch (container[i].name) { 
      case "bname1[]": 
       //validate according to filed 
       break; 
      case "aname1[]": 
       //validate according to filed 
       break; 
      case "pub1[]": 
       //validate according to filed 
       break; 
      case "isdn1[]": 
       //validate according to filed 
       break; 
      case "edi1[]": 
       //validate according to filed 
       break; 
      case "cost1[]": 
       //validate according to filed 
       break; 
      case "num1[]": 
       //validate according to filed 
       break; 
      } 

     } 

    } 

Answer 2

一些建議供您參考： 1）考慮把所有你想在你的形式單一的DIV中複製的字段。 然後，當用戶想要添加新的項目（書），你需要做的就是複製這個div的內容。這樣你將只保留一個字段集的副本。 2）也考慮動態通用表單驗證。你使用額外的屬性添加驗證規則到你的表單字段定義，即[< input ... validationRules =「mandatory，minimumLength = 10 ...」/ >]我認爲你可以用JQuery實現類似的東西，但是我個人更喜歡不要使用大型圖書館做小型工作。 3）考慮給你的領域獨特的ID也。

Answer 3

使用

var bname= document.getElementsByName('bname1[]'); 
var aname=document.getElementsByName('aname1[]'); ......... 

for(var i=0;i<bname.length;i++) 
{ 
    //Your validations 
} 
for(var i=0;i<aname.length;i++) 
{ 
    //Your validations 
}..... 

.. 代碼中的所有元素做..

Answer 4

驗證功能例如：

function validate_field(f) { // f is input element 
    var name = f.name; // or also f.getAttribute('name') 
    var value = f.value; // or also f.getAttribute('value'), but should be defined 
    var error_div = document.getElementById(name+'err'); 
    //alert('name '+name+' value '+value); 
    if (name.indexOf('bname') == 0) { // if validate book name 
     if (value == '') { // e.g. book name should not be empty string? 
      error_div.innerHTML = 'book name cannot be empty!'; 
      return false; // field is wrong 
     } 
    } 
    else if (name.indexOf('aname') == 0) { // if validate author name 
     if (value.length<2) { 
      error_div.innerHTML = 'author\'s name is too short!'; 
      return false; // at least two characters long name? :) 
     } 
    } 
    else if (name.indexOf('pub') == 0) { // if validate publisher 
     if (value.length<2) { 
      error_div.innerHTML = 'publisher\'s name is too short!'; 
      return false; 
     } 
    } 
    else if (name.indexOf('isdn') == 0) { // if validate ISDN Number 
     if (value == '') { 
      error_div.innerHTML = 'ISDN cannot be empty!'; 
      return false; 
     } 
    } 
    else if (name.indexOf('edi') == 0) { // if validate Edition 
     if (value == '') { 
      error_div.innerHTML = 'edition cannot be empty!'; 
      return false; 
     } 
    } 
    else if (name.indexOf('cost') == 0) { // if validate Price 
     if (value=='') { 
      error_div.innerHTML = 'Cannot be empty!'; 
      return false; 
     } 
     if (isNaN(value)) { 
      error_div.innerHTML = 'Please write a price using digits!'; 
      return false; 
     } 
    } 
    else if (name.indexOf('num') == 0) { // if validate Number of copies 
     if (value=='') { 
      error_div.innerHTML = 'Cannot be empty!'; 
      return false; 
     } 
     if (isNaN(value)) { 
      error_div.innerHTML = 'Please number of copies via digits!'; 
      return false; 
     } 
    } 
    error_div.innerHTML = 'ok'; 
    return true; // field is ok 
    // you can also have a look at http://www.javascript-coder.com/html-form/javascript-form-validation.phtml 
} 

全部工作的腳本在這裏：pastebin.com/UkVP2uLb