$("#form-activity-add").validate({
            focusCleanup: true,
            rules:{
            	actDateRange:{
                    timeRange:true,
                }
            }
        });
$(function(){
 jQuery.validator.addMethod("timeRange", function (value, element){
 		        return this.optional(element) || isTimeRange(value);
 		    },"请正确输入时间区间");
        	 
        	 function isTimeRange(time) {
        		console.log(time);
        		var pattern = /[0-2]\d:[0-5]\d:[0-5]\d-[0-2]\d:[0-5]\d:[0-5]\d/;
        		if(pattern.test(time)){
        			// 时间格式符合的情况下,验证前者时间小于后者时间
        			var arr = time.split("-");
        			var begin = arr[0];
        			var end = arr[1];
        			var begin_arr = begin.split(":");
        			var begin_hour = begin_arr[0];
        			var begin_minute = begin_arr[1];
        			var begin_second = begin_arr[2];
        			
        			var end_arr = end.split(":");
        			var end_hour = end_arr[0];
        			var end_minute = end_arr[1];
        			var end_second = end_arr[2];
        			if(parseInt(begin_hour)<=parseInt(end_hour)){
        				if(parseInt(begin_hour)==parseInt(end_hour)){
        					// 小时相等的情况下才需要比较分钟
        					if(parseInt(begin_minute)<=parseInt(end_minute)){
        						if(parseInt(begin_minute)==parseInt(end_minute)){
        							// 分钟相等的情况下才需要比较秒
        							if(parseInt(begin_second)<parseInt(end_second)){
                						return true;
                					}else{
                						return false;// 秒验证失败
                					}
        						}else{
        							return true;
        						}
            				}else{
            					return false;// 分钟验证失败
            				}
        				}else{
        					return true;
        				}
        			}else{
						return false;// 小时验证失败        				
        			}
        		}else{
        			return false; // 时间格式已经不匹配
        		}
                
             }

});

前端代码

<div class="form-group">    
   <label class="col-sm-3 control-label is-required">活动起止时间:</label>
    <div class="col-sm-8">
        <input name="actDateRange" placeholder="格式为19:00:00-21:00:00" class="form-control" type="text" maxlength="20" required>
    </div>
</div>

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程

程序的健壮性还需要后端的支持,万一使用postman测试的数据,就绕过了前端的js校验,所以我们的后端同样需要校验。由于是定制需求(有可能网上已经有了吧,如果没有,希望可以开源),所有我自己编写了一个自定义校验注解。

package com.ruoyi.party.system.validate;
/**
 * 自定义校验时间起止
 * @author 黄宝康
 *格式19:00:00-21:00:00
 */

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

import javax.validation.Constraint;
import javax.validation.Payload;

@Documented
@Constraint(validatedBy = { TimeRangekValidator.class })
@Target({ ElementType.METHOD, ElementType.FIELD })
@Retention(RetentionPolicy.RUNTIME)
public @interface TimeRange {
	// 默认错误消息
	String message() default "非法时间区间";

	Class<?>[] groups() default {};

	Class<? extends Payload>[] payload() default {};

}

package com.ruoyi.party.system.validate;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import javax.validation.ConstraintValidator;
import javax.validation.ConstraintValidatorContext;

/**
 * //获取默认提示信息 String defaultConstraintMessageTemplate =
 * context.getDefaultConstraintMessageTemplate(); System.out.println("default
 * message :" + defaultConstraintMessageTemplate); //禁用默认提示信息
 * context.disableDefaultConstraintViolation(); //设置提示语
 * context.buildConstraintViolationWithTemplate("can not contains
 * blank").addConstraintViolation(); return false;
 * 
 * @author 黄宝康
 *
 */
public class TimeRangekValidator implements ConstraintValidator<TimeRange, String> {

	@Override
	public void initialize(TimeRange constraintAnnotation) {

	}

	@Override
	public boolean isValid(String value, ConstraintValidatorContext context) {
		// 对时间字符串进行比较
		String pattern = "[0-2]\\d:[0-5]\\d:[0-5]\\d-[0-2]\\d:[0-5]\\d:[0-5]\\d";

		Pattern r = Pattern.compile(pattern);
		Matcher m = r.matcher(value);
		if (m.matches()) {
			// 时间格式符合的情况下,验证前者时间小于后者时间
			String[] arr = value.split("-");
			String begin = arr[0];
			String end = arr[1];
			String[] begin_arr = begin.split(":");
			String begin_hour = begin_arr[0];
			String begin_minute = begin_arr[1];
			String begin_second = begin_arr[2];

			String[] end_arr = end.split(":");
			String end_hour = end_arr[0];
			String end_minute = end_arr[1];
			String end_second = end_arr[2];

			if (Integer.parseInt(begin_hour) <= Integer.parseInt(end_hour)) {
				if (Integer.parseInt(begin_hour) == Integer.parseInt(end_hour)) {
					// 小时相等的情况下才需要比较分钟
					if (Integer.parseInt(begin_minute) <= Integer.parseInt(end_minute)) {
						if (Integer.parseInt(begin_minute) == Integer.parseInt(end_minute)) {
							// 分钟相等的情况下才需要比较秒
							if (Integer.parseInt(begin_second) < Integer.parseInt(end_second)) {
								return true;
							} else {
								// 设置提示语
								context.buildConstraintViolationWithTemplate("起止时间区间-秒验证失败").addConstraintViolation();
								return false;
							}
						} else {
							return true;
						}
					} else {
						// 设置提示语
						context.buildConstraintViolationWithTemplate("起止时间区间-分钟验证失败").addConstraintViolation();
						return false;
					}
				} else {
					return true;
				}
			} else {
				// 设置提示语
				context.buildConstraintViolationWithTemplate("起止时间区间-小时验证失败").addConstraintViolation();
				return false;
			}
		} else {
			// 设置提示语
			context.buildConstraintViolationWithTemplate("起止时间区间-格式不正确").addConstraintViolation();
			return false;
		}
	}
}

在实体类中增加我们的注解

 /** 活动起止时间 */
    @Excel(name = "活动起止时间")
    @NotBlank(message = "活动起止时间不能为空")
    @Size(min = 0, max = 20, message = "活动起止时间长度不能超过20个字符")
   // @Pattern(regexp="[0-2]\\d:[0-5]\\d:[0-5]\\d-[0-2]\\d:[0-5]\\d:[0-5]\\d",message="活动起止时间格式错误")
    @TimeRange(message="活动起止时间非法")
    private String actDateRange;

在我们的控制器中的添加和编辑中增加@Validated注解
jquery-validate验证时间区间_validate验证时间区间

 

欢迎加入康哥IT粉丝交流QQ群833249482