Question

鉴于以下HTML表是PHP页面上表单的一部分，验证用户输入的最佳实践是什么？

如果用户选中一行（或多行）的复选框，那么确保StartDate和EndDate输入字段使用客户端脚本编写数据的最佳方法是什么。

我想使用jquery，但我对jquery很新。 jquery验证插件是否最有意义？

<table width='100%' border='0' cellspacing='0' cellpadding='0'>
    <tr>
        <td>
            <input type='checkbox' id='Product[916109]' name='Product[916109]' value='916109' class='select'>
        </td>
        <td>
            <input type='text' id='ProductName[916109]' name='ProductName[916109]' value='ESY792'>
        </td>
        <td>
            <input type='text' id='StartDate[916109]' name='StartDate[916109]' class='startDatePicker'>
        </td>
        <td>
            <input type='text' id='EndDate[916109]' name='EndDate[916109]' class='endDatePicker'>
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='Product[916110]' name='Product[916110]' value='916110' class='select'>
        </td>
        <td>
            <input type='text' id='ProductName[916110]' name='ProductName[916110]' value='ESY793'>
        </td>
        <td>
            <input type='text' id='StartDate[916110]' name='StartDate[916110]' class='startDatePicker'>
        </td>
        <td>
            <input type='text' id='EndDate[916110]' name='EndDate[916110]' class='endDatePicker'>
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='Product[916111]' name='Product[916111]' value='916111' class='select'>
        </td>
        <td>
            <input type='text' id='ProductName[916111]' name='ProductName[916111]' value='ESY794'>
        </td>
        <td>
            <input type='text' id='StartDate[916111]' name='StartDate[916111]' class='startDatePicker'>
        </td>
        <td>
            <input type='text' id='EndDate[916111]' name='EndDate[916111]' class='endDatePicker'>
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='Product[916112]' name='Product[916112]' value='916112' class='select'>
        </td>
        <td>
            <input type='text' id='ProductName[916112]' name='ProductName[916112]' value='ESY795'>
        </td>
        <td>
            <input type='text' id='StartDate[916112]' name='StartDate[916112]' class='startDatePicker'>
        </td>
        <td>
            <input type='text' id='EndDate[916112]' name='EndDate[916112]' class='endDatePicker'>
        </td>
    </tr>

    <tr>
        <td>
            <input type='submit' id='btnSubmit' name='btnSubmit' value='Submit'>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 1

这应该可以解决您所描述的用例：

var theForm = $('form'),
  rows = theForm.find('tr');

theForm.on('submit', function(evt) {
  rows.each(function(i, row) {
    var valid = row.find( '.select' ).is( ':checked' )
             && ( row.find('.startDatePicker').val() && row.find('.endDatePicker').val() ) 

    if ( !valid ) return evt.preventDefault();
  } );
} );

加载验证插件是没有意义的，如果您只需要它，但如果您可能在其他地方使用它，那就去吧。

使用Jquery仅对多行HTML表的已检查行进行验证

1 个答案: