JqueryValidate 对动态表单的验证

前端
留言

   最近维护了一个旧项目，前端使用的是 thymeleaf 页面。表单验证通过 JqueryValidate 实现，其中用到了动态表单的验证，在此记录一下。

  1. 针对动态的表单的验证，可以采用的方法是，在表单动态追加元素之后，再给新元素绑定验证规则；
  2. 具体示例代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    index++;
    // 定义元素字符串 
    let input = `<input id="id${index}" name="name${index}" class="form-control" type="text"> `;
    // 追加到 form 表单最后一位 
    $("#form").append(input);
    // 给新添加的元素绑定验证 
    $(`#id${index}`).rules('add', {
        required: true
    });
  3. *** 注意：*** 动态生成的表单元素一定要定义 name 属性，否则表单提交时验证的只有第一个动态表单。

文章目录