Bootstrap动态表单验证formValidation实战

"Bootstrap 表单验证formValidation用于实现动态表单验证功能，支持动态添加输入字段和验证规则。" Bootstrap 表单验证插件formValidation是一个强大的工具，它允许开发者轻松地为HTML表单创建复杂的验证逻辑。在这个场景中，我们需要实现一个功能，即在用户点击"+"按钮后动态添加新的输入字段，并且这些新增的输入字段能够即时进行验证。这个功能对于那些需要用户根据需求自由添加信息的表单特别有用。 1. **获取formValidation插件**： 首先，你需要从官方网站（http://formvalidation.io/）下载formValidation的库文件。这个插件提供了丰富的验证规则和方法，使得表单验证变得简单。 2. **导入相关文件**： 下载完成后，将CSS、JS文件引入到你的HTML文档中。通常，这包括formValidation的核心库、Bootstrap的样式和图标库等。确保正确配置了路径，以便页面能正确加载这些资源。 3. **使用关键API**： 在动态添加和移除输入字段时，会用到以下关键字： - `addField`：这个方法用于向验证框架中添加一个新的输入字段，使其可以进行验证。你需要提供字段的DOM元素或其ID，以及对应的验证规则。 - `removeField`：当不再需要某个输入字段时，使用这个方法将其从验证框架中移除。 - `different`：这是一个验证规则，确保两个字段的值不相同，适用于需要输入独特信息的情况。 4. **处理表单结构**： 官方示例中的每个输入字段通常具有不同的name属性，以便于区分。然而，在你的项目中，由于不是通过传统的form表单提交数据，而是通过Ajax以JSON格式发送，所以可以使用相同的name属性。这简化了HTML结构，但需要注意在处理验证规则时，要确保正确地针对这些动态生成的字段。 5. **HTML布局**： HTML部分需要包含一个"+"按钮（标记为`addPos`）来触发动态添加输入字段，以及一个"-"按钮（标记为`removPos`）用于删除。这里有一个示例的输入字段组，包括`garageNo`、`posX`和`posY`，用户可以点击"+"按钮添加更多这样的组。 6. **JavaScript实现**： 使用JavaScript监听"+"按钮的点击事件，当被点击时，动态创建新的输入字段，并调用`addField`方法将它们加入到验证框架中。同样，当用户点击"-"按钮时，使用`removeField`移除相应的输入字段。 7. **验证规则配置**： 根据业务需求，你需要为每个动态添加的输入字段定义验证规则。例如，可能要求`posX`和`posY`必须是数字，`garageNo`不能为空等。这些规则可以在`addField`调用时指定。 8. **数据提交**： 由于不是使用传统的form提交，所以在用户完成输入并点击提交按钮后，你需要编写一段JavaScript代码来收集所有验证过的字段值，将它们组合成JSON格式，然后通过Ajax发送到服务器。 总结来说，使用Bootstrap表单验证formValidation插件，你可以构建一个灵活、可扩展的动态表单验证系统，适应不断变化的用户输入需求。这个插件的API和丰富的验证规则集使你可以创建符合业务逻辑的验证策略，提高用户体验，并确保数据的准确性和完整性。