如何使用JavaScript验证动态生成的输入框

Question

嗨，我有一个带有ajax函数的表单，当用户输入代码并从组合框中选择一个值时，该表单会附加数据。 由于附加的数据具有动态行，因此我想验证这些输入框，以便用户只能输入诸如01、02、03 .... 10之类的值，并且如果用户尝试输入的值大于10它应该显示一个警告框。 到目前为止，我已经拥有执行此操作的脚本，但是由于name属性不断更改，验证似乎无法正常进行。 有人可以帮我吗？

这是我的JavaScript代码：

function getXMLHTTP() { //function to return the xml http object
  var xmlhttp = false;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e1) {
        xmlhttp = false;
      }
    }
  }
  return xmlhttp;
}

function getfunit2(makhcode, cmbmon) {
  var strURL = "subjsele2.php?makhcode=" + document.nigran.makhcode.value + "&cmbmon=" + document.nigran.cmbmon.value;
  var req = getXMLHTTP();
  if (req) {
    req.onreadystatechange = function () {
      if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
          document.getElementById('suboth').innerHTML = req.responseText;
        } else {
          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }
      }
    }
    req.open("POST", strURL, true);
    req.send(null);
  }
}

这是我的PHP代码：

<?php
$makhcode=$_GET["makhcode"];

$cmbmon=$_GET["cmbmon"];
$monno1 = "mon$cmbmon";


$con = mysql_connect('localhost', '****', '*****');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("db", $con);

$scomp = mysql_query("SELECT * FROM subject WHERE compulsory !='1' ORDER BY ordby")or die(mysql_error());
if(mysql_num_rows($scomp)>0){
 echo "<table>";
   while($csub = mysql_fetch_assoc($scomp)){
         $msubjcode = $csub["code"];

         $csubqry = mysql_query("SELECT * FROM nigstat WHERE makhcode='".$makhcode."' AND subcode='".$msubjcode."'") or die(mysql_error());
         $fetchmon = mysql_fetch_array($csubqry) ;
         $mmonval =  $fetchmon["$monno1"];

    echo "<tr>";
    echo "<td width='200px'><font color='#FF0033'><strong>".$csub[name]."</strong></td><td><input id='s_id' name='s_$csub[code]' type='text' onkeypress=\"return chknum()\" size='1' maxlength='2' value='$mmonval'></td><input type='hidden' name='$mmonval' size='3' maxlength='3'>";
    echo "</tr>";

}


echo "</table>";
 }

mysql_close($con);
?>

这是我的HTML代码：

    <table border ="0px" width="100%">

            <tr>
                <td align="right" width="58px"><label class="" for="element_1"><font size="3px"><b>Code</b></font></label></td><td><input id="makhcode" name="makhcode" onkeyup="showyear('makhsele.php?makh='+this.value); getfunit(); getfunit2();" type="text" maxlength="6" size="6" value=""/></td><td><label class="description" align="right" for="element_1">Month</label></td><td><select id="cmbmon" name="cmbmon" class="" onchange="getfunit(); getfunit2();" style="font-size:14px;">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>

                </td>
            </tr>
   </table>
    <p style="border-bottom: 1px dotted #ccc;"></p>
    <div id="makhhint" style=""></div>
    <p style="border-bottom: 1px dotted #ccc;"></p><br />

    <table border="0px" width="100%" cellspacing="0" cellpadding="0">

      <th><div class="form_description"><h2>Compulsory Subjects</h2></div></th>      
      <th><div class="form_description"><h2>Other Subjects</h2></div></th>
      <tr>
      <td style="vertical-align: top;">
    <div id="subcomp" align="left" align="top" style="background-color: #99FFFF;border: 1px solid black;padding:10px;">

    </div>
      </td>
      <td style="vertical-align: top;">
  <div id="suboth" align="left" align="top" style="background-color: #FFFFCC;border: 1px solid black;padding:10px;">

    </div>

Answer 1

使用此功能来验证代码

<input type="text" id="fname" onkeyup="validate_code(this)">

 function validate_code(that)
 {

   if(isNaN(that.value)==true || that.value>10)
    {
        that.value='';
        alert('enter a valid value');
    }
     return true
  }

链接到示例验证示例