1

这篇文章是基于我之前的问题。我有一个包含三个部分的表单，并使用back和next按钮一次仅向用户隐藏和显示一个表格部分。此外，该next按钮还用作验证触发器。

我的问题是：

  1. 我的验证方法未能检查下拉字段。
  2. 有没有一种快速的方法jQuery validation plugin可以验证具有相似名称的字段？例如，我有带有 name mm1、mm2和的字段mm3。可以mm*在验证规则中使用一些快捷方式吗？
  3. 我发现内置方法number无法验证科学输入。是否有其他内置方法来处理它？我必须为此添加自己的方法吗？

感谢您的任何投入！这是一个演示。

HTML

<form method="post" id="form1" action=index.html>
    <table>
         <H4 align="center" id="id_tab">
            |<a href="#" class="Chemical"> Chemical </a>|
             <a href="#" class="Application"> Application </a>|
             <a href="#" class="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab tab_Chemical" border="0">
        <tr><th><label for="id_wat_hl">Water Column Half life (days):</label></th>
            <td><input type="text" name="wat_hl" id="id_wat_hl" value="1e-08" /></td></tr>
    </table>
    <table class="tab tab_Application" border="0" style="display:none">
        <tr><th scope="col"><label for="id_noa">Number of Applications:</label></th>
             <td scope="col"><select name="noa" id="id_noa">
                 <option value="">Make a selection</option>
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option></select>
             </td>
         </tr>    
    </table>    
    <table class="tab tab_Physical" border="0" style="display:none">
        <tr><th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
            <td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td></tr>
    </table>
    <table align="center">
        <tr><td><input class="back" type="button" value="Back" /></td>
            <td><input class="next" type="button" value="Next" /></td>
            <td><input class="submit" type="submit" value="Submit" /></td></tr>
    </table></form>

JS

$(document).ready(function () {
    var tab_pool = ["tab_Chemical", "tab_Application", "tab_Physical"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();

    var validator = $('form').validate({
        ignore: 'input[type="button"],input[type="submit"]',
        rules: {
            wat_hl: {
                required: true,
                number: true
            },
            noa: {
                required: true
            },
            mm1: {
                required: true
            },            
            mm2: {
                required: true
            },              
            mm3: {
                required: true
            },              
            dd1: {
                required: true
            },            
            dd2: {
                required: true
            },              
            dd3: {
                required: true
            },               
            mas_tras_cof: {
                required: true
            }
        }
    });


    $('.next').click(function () {
        var tab = $(".tab:visible");

        var valid = true;
        $('input', tab).each(function (i, v) {
            valid = validator.element(v) && valid;
        });

        if (!valid) {
            return;
        }

        if (curr_ind < 2) {
            $(".tab:visible").hide();
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".back").show();
        }
        if (curr_ind == 2) {
            $(".submit").show();
            $(".next").hide();
        }
    });

    $('.back').click(function () {
        if (curr_ind > 0) {
            $(".tab:visible").hide();
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });

    var i = 1
    $('.tab_Application').append('<tr id="noa_header" style="display:none"><th width="18%">App#</th><th width="18%">Month</th><th width="18%">Day</th>');

    $('#id_noa').change(function () {
        var total = $(this).val()
        $('tr[id*="noa_header"]').show()

        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"  disabled/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td>');
            i = i + 1;
        }
        while (i - 1 > total) {
            $(".tab_Application tr:last").remove();
            i = i - 1
        }
        $('</table>').appendTo('.tab_Application');
    })
});
4

2 回答 2

2

问题1：您的代码包含：

$('input', tab).each(function (i, v) {
        valid = validator.element(v) && valid;
    });`

但 aselect不是input。将其更改为$('input,select', tab).

问题 2：有关如何按班级应用规则，请参阅此问题。此外，如果输入具有作为验证方法名称的类，则将应用该方法，因此您可以class="required number"在输入上使用。并且该插件还可以识别 HTML5 验证标签，因此您可以说它<input type="number" required/>会执行适当的验证。

问题 3：您可以使用正则表达式。看到这个问题。

于 2013-03-01T03:28:05.077 回答
2

引用操作：

2) jQuery 验证插件中是否有一种快捷方式可以验证具有相似名称的字段？例如，我有带有 name mm1、mm2和的字段mm3。可以mm*在验证规则中使用一些快捷方式吗？

是的。

$('[name*="mm"]').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true,
        messages: {
            required: "custom message required",
            digits: "custom message digits"
        }
    });
});

请参阅文档： http ://docs.jquery.com/Plugins/Validation/rules#.22add.22rules

演示：http: //jsfiddle.net/g7XES/

回应OP的评论：

additional-methods.js文件内部有一个名为integer.

jQuery.validator.addMethod("integer", function(value, element) {
    return this.optional(element) || /^-?\d+$/.test(value);
}, "A positive or negative non-decimal number please");

演示：http: //jsfiddle.net/v82sZ/

于 2013-03-01T03:43:32.883 回答