最近维护了一个旧项目,前端使用的是 thymeleaf 页面。表单验证通过 JqueryValidate 实现,其中用到了动态表单的验证,在此记录一下。
- 针对动态的表单的验证,可以采用的方法是,在表单动态追加元素之后,再给新元素绑定验证规则;
- 具体示例代码如下:
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 });
- 注意: 动态生成的表单元素一定要定义 name 属性,否则表单提交时验证的只有第一个动态表单。