验证输入使用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