• 首页
  • 邻居
  • 关于
  • 归档
  • 搜索
  • 夜间模式
    ©2020-2026  我的学习笔记 Theme by OneBlog

    我的学习笔记博客

    搜索
    标签
    # 随笔 # Java # 教程 # openwrt # Mysql # SQL # 爬虫 # post # Js调优 # MAVEN
  • 首页>
  • Java>
  • 正文
  • 解决validate无法验证多个相同name的input

    2021年01月05日 2 k 阅读 0 评论 4749 字

    解决validate无法验证多个相同name的input (动态生成的表格)

    记录实际业务遇到问题

    首先给input分别设置不同的id

    //用于生成uuid
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
    
        function guid() {
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
    //为动态添加的元素绑定事件
        $('#contentTable').on('click', '.addTable', function () {
            // var uuid = "qty" + guid();
            //步骤预设
            var str1 = ' <tr>\n' +
                '                                <td>\n' +
                '                                    <input id="qty' + guid() + '" type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                           name="gspStepTaskPresetChildtable.stepName"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                    <input id="qty' + guid() + '" type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                           name="gspStepTaskPresetChildtable.workContent"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                    <input id="qty' + guid() + '"  type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                       onkeyup="value=value.replace(/[^\\d\\.]/g,\'\')"     name="gspStepTaskPresetChildtable.completeDays"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                    <input  id="qty' + guid() + '" type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                           name="gspStepTaskPresetChildtable.milestone"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                    <input id="qty' + guid() + '" type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                           name="gspStepTaskPresetChildtable.precautions"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                    <input id="qty' + guid() + '" type="text" style="width: 126px;height: 32px" class="input-xlarge required"\n'
                +
                '                                      onkeyup="value=value.replace(/[^\\d\\.]/g,\'\')"      name="gspStepTaskPresetChildtable.standardWorkingHours"></input>\n' +
                '                                </td>\n' +
                '                                <td>\n' +
                '                                   <p class="addTable">+</p>\n' +
                '                                   <p class="delTable" onclick="delTable(this);">-</p>\n' +
                '                                </td>\n' +
                '                            </tr>';
    
            $('#contentTable > tbody:nth-child(2)').append(str1);
    
        });

    设置validate的多个input验证方法为根据id验证

    $(function () {
            if ($.validator) {
                $.validator.prototype.elements = function () {
                    var validator = this,
                        rulesCache = {};
                    return $([]).add(this.currentForm.elements)
                        .filter(":input")
                        .not(":submit, :reset, :image, [disabled]")
                        .not(this.settings.ignore)
                        .filter(function () {
                            var elementIdentification = this.id || this.name;
                            !elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned", this);
                            if (elementIdentification in rulesCache || !validator.objectLength($(this).rules()))
                                return false;
                            rulesCache[elementIdentification] = true;
                            return true;
                        });
                };
    
            }
            # [id^=qty] 根据实际业务需求修改 id以qty开头的
            $('[id^=qty]').each(function (e) {
                $(this).rules('add', {
                    minlength: 2,
                    required: true
                })
            });
        });
    
        
    本文著作权归作者 [ admin ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    JS
    取消回复

    发表留言
    回复

    首页邻居关于归档
    Copyright©2020-2026  All Rights Reserved.  Load:0.035 s
    京ICP备18019712号
    Theme by OneBlog V3.6.5
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。