-1

我正在处理表格内的动态数组，这意味着表格根据用户输入显示。用户需要填写此表，然后单击提交。我需要在此处放置 javascript 以检查用户是否未选择任何内容或未在任何列中写入。如果是这样，用户应该不能继续。

<form action="klr.php"  method="post" name="myform"  >

     <?php

        for ($i = 1; $i <= $de; $i++) {
        ?>
        <tr>
            <td>Tube</td>
            <td>
                <select id="in4-<?php echo $i; ?>" name="t1[<?php echo $i; ?>]" onclick="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)">
                    <option value="0">0</option>
                    <option value="12">12</option>
                    <option value="18">18</option>
                    <option value="24">24</option>
                    <option value="75">75</option>
                </select>
            </td>
            <td>
                <input type="text" name="t2[<?php echo $i; ?>]" id="in1-<?php echo $i; ?>" onblur="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)"/>
            </td>
            <td>
                <select name="a1[<?php echo $i; ?>]" id="in2-<?php echo $i; ?>" onclick="getText3(<?php echo $i; ?>)"onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)" >
                    <option value="0">0</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>

                </select>
            </td>
    </table>

我只提供了用户选择值的表格第一行的代码。在第二列用户可以输入一些值，在第三列用户可以再次选择一个值。我需要将 javascript 放在其中的三个列中

4

1 回答 1

0

听起来您只是想验证表单元素中的所有内容是否都经过验证。这是我为帮助您入门而设计的两个小提琴：

1) 常规 Javascript

function formCheck() {
    var form = document.getElementById('mainForm'),
        inputs = form.getElementsByTagName('INPUT'), 
        selects = form.getElementsByTagName('SELECT'),
        i,
        errors = [];


    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].value.match(/^\s*$/)) {
            errors.push(inputs[i].title + ' was not set');
        }
    }

    for (i = 0; i < selects.length; i++) {
        if (selects[i].selectedIndex === 0) {
            errors.push(selects[i].title + ' was not set');
        }
    }    

    if (errors.length > 0 ) {
        alert(errors.join('\n'));
        return false;
    } 
    alert('success!');
    return true;
}

http://jsfiddle.net/fstreamz/3Decx/4/

2) 使用 jQuery

function formCheck() {
    var formElements = $('#mainForm').find('input, select'),
    errors = [];

    $.each(formElements, function(i, el) {
        if ($(el).val().match(/^\s*$/)) {
            errors.push($(el).prop('title') + ' is blank!');
        }
    });

    if (errors.length > 0 ) {
        alert(errors.join('\n'));
        return false;
    } 
    alert('success');
    return true;
}

http://jsfiddle.net/fstreamz/w5KG3/4/

一些注意事项： 1) 它检查表单元素中的每个输入或选择元素，id="mainForm"，因此您必须将其添加到表单中（name="myForm" 旁边）。2）我在输入/选择元素中添加了一个标题属性，这样我就可以在错误消息中显示它作为参考。3）它检查输入框中的空白并认为无效。4）在jsFiddle中，即使成功也会返回false，因此表单不会提交用于演示目的。如果您使用它，则应将其更改为 true。

于 2013-07-17T19:54:00.597 回答