BootStrapValidator与My97日期校验的实例代码

在Web开发中，数据验证是确保用户输入符合预期的重要环节，BootstrapValidator和My97日期插件是两种常用的前端验证工具。BootstrapValidator是一款基于Bootstrap框架的验证插件，提供丰富的验证规则和自定义验证功能，而My97日期插件则是一个强大的JavaScript日期选择器，提供了多种日期格式和事件处理。 在本实例中，我们需要同时使用这两种工具来完成一个日期范围的验证。HTML页面上有两个日期输入框，分别用于输入开始时间和结束时间。这两个输入框都使用了My97日期插件，通过`onFocus`事件触发日期选择器，并且设置了一些基本属性，如`maxDate`和`minDate`，以限制可选日期范围。 My97日期插件提供了多个事件，如`onpicking`、`onpicked`、`onclearing`和`oncleared`等。在这里，我们关注的是`onpicked`事件，它在用户选择完日期后触发。为了实现BootstrapValidator的自动校验，我们需要在用户选择日期后立即执行验证逻辑。因此，我们在开始时间的日期输入框中添加了`onpicked`事件，调用一个名为`checkPlanStartTime`的函数，将当前元素作为参数传递。 ```javascript function checkPlanStartTime(inputElement) { // 在这里进行验证逻辑，例如检查开始时间是否晚于结束时间 var startDate = $dp.$D('ConstructionPlanAdd_planStartTime'); var endDate = $dp.$D('ConstructionPlanAdd_planEndTime'); if (startDate && endDate && startDate > endDate) { BootstrapValidator.getInstance(inputElement.form).updateStatus('planEndTime', 'NOT_VALIDATED', null); BootstrapValidator.getInstance(inputElement.form).validateField('planEndTime'); } } ``` 在`checkPlanStartTime`函数中，我们首先获取到开始时间和结束时间，然后比较它们的大小。如果开始时间晚于结束时间，说明输入无效，我们需要通过`BootstrapValidator.getInstance()`获取验证器实例，调用`updateStatus`方法将结束时间字段的状态设为未验证（`NOT_VALIDATED`），并调用`validateField`方法重新验证结束时间字段。这样，当开始时间不正确时，结束时间字段会显示错误提示。 整个流程下来，用户在选择开始日期后，如果开始日期晚于结束日期，结束日期字段会立即显示错误信息，提高了用户体验。这种结合使用BootstrapValidator和My97日期插件的方法在实际项目中非常实用，尤其对于需要即时反馈的日期范围验证场景。通过灵活运用这两种工具，我们可以创建出既美观又功能强大的前端表单验证系统。