如何在javascript中验证具有相同名称的多个相同类型输入

How to validate multiple same type input with same names in javascript

本文关键字：输入 同类型 javascript 验证      更新时间：2023-09-26

我对Javascript有点陌生。我有一个html表单与多个输入类型，但有相同的名称发生多个类型。在将表单中的数据插入数据库之前，我需要验证表单。我能够在没有JS验证的情况下更新和插入数据库，但由于处理相同名称的输入的复杂性，我无法使用javascript执行验证部分。下面是表单:

    <form name="confirmation" method="post" action="appointment.php" onsubmit="return check()">
        <label>Restaurant Name: </label>
        <input name="r_name[]" type="text" value="<?php echo $row[0]?>"><br>
        <label>Appointment Date: </label>
        <input name="app_date[]" type="date" value="<?php echo $row[1]?>"><br>
        Confirm:<select name="confirm[]"> 
            <option value=""></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select><br><br>
    </form>
下面是更新数据库的php代码: 
<?php 
if(isset($_POST['submit'])){
    $names= $_POST['r_name'];
    $dates=$_POST['app_date'];
    $confirm=$_POST['confirm'];
    //echo $count;
    for($i=0;$i<$count;$i++){
    //echo "success";
        $value=$confirm[$i];
        if($value=="yes")
            $value="y";
        else 
            $value="n";
      //  echo $value;
        $result= mysql_query("update appointment set confirm='".$value."' where rname='".$names[$i]."';");
    }                       
}?>

要将表单中具有相同名称的数据插入/更新到数据库中，我必须将[]与它们各自的名称关联起来，因为这是一种简单的方法。但我有问题评估它在javascript的验证部分。谁能建议我如何去做一个小的代码片段与在上述形式中使用的输入类型使用的任何名称。谢谢。

如果name s对于多个输入元素是相同的，如果您想要针对特定元素，您可以在元素上使用唯一的id s，或者您可以使用class s来针对一组相似的元素。

<form>
    <input name="myInput[]" id="myInput_0" class="myInput" type="text" value="">
    <input name="myInput[]" id="myInput_1" class="myInput" type="text" value="">
    <input name="myInput[]" id="myInput_2" class="myInput" type="text" value="">
</form>

现在您可以将myInput[0]定位为getElementById('myInput_0')或将所有myInput[]定位为getElementByClassName('myInput')

试试document.getElementsByName

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByName

你可以使用这个jquery库http://www.position-relative.net/creation/formValidator/demos/demoValidators.html

您可以在执行提交后使用此验证，并且库会进行所有验证。

相关文章：