JQuery validate验证 自定义方法

//表单校验
	$("#submitForm").validate({
		rules: {
			startDate: {
				required : true,//必填
				isFuture : "#startDate"//自定义验证方法
                //PS:如果自定义的方法需要与后台交互,那么ajax请求需设置同步【async : false】
			},
			endDate: {
				compareStart : "#endDate"//自定义验证方法
			},
			limit: {
				required: true,//必填
				number: true,//数字
				min: 0//最小值
			},
			fund: "required"//必填
		}, 
		messages: {
			startDate: {
                                isFuture: "请输入格式正确的未来日期"//返回false后的通知信息
                        },
                        endDate: {
            	                compareStart: "请输入格式正确的未来日期"//返回false后的通知信息
                        }
		},
		submitHandler:function(form){
                        //满足以上条件后执行的方法
			Quota.submit();
                }
	});

/**
 * 判断输入值是否是未来
 */
jQuery.validator.methods.isFuture = function(value, element, param) {
	var dateInput = $(param).val();
	var d = isDate(dateInput);
	if(d == false){
		return false;
	}
	var today=new Date();
	if(d<=today){
		return false;
	}
	return true;
}

/**
 * 判断输入值是否>=“起始时间”
 */
jQuery.validator.methods.compareStart = function(value, element, param) {
	var dateInput = $(param).val();
	// 终止日期可为空
	if(dateInput == ""){
		return true;
	}
	var d = isDate(dateInput);
	if(d == false){
		return false;
	}
	var start= isDate($("#startDate").val());
	if(start == false){
//		$(param).val("");
		Tip.info("请先输入起始时间");
		return false;
	}
	if(d<start){
		return false;
	}
	return true;
}

/**
 * 判断输入值是否日期格式
 * @param dateString
 * @returns {Boolean}
 */
function isDate(dateString) {
	if (dateString.trim() == ""){
		return false;
	}
	var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
	if (r == null) {
		return false;
	}
	var d = new Date(r[1], r[3] - 1, r[4]);
	var num = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d
			.getDate() == r[4]);
	if (num == 0) {
		return false;
	}
	return d;
}
<form class="form-horizontal m-t" id="submitForm">
    <div class="form-group">
        <label class="col-sm-2 control-label">起始时间:</label>
	<div class="col-sm-5">
	    <input id="startDate" name="startDate" class="form-control fa fa-calendar" readonly="readonly" type="text" th:value="${startDate}">
	</div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">终止时间:</label>
	<div class="col-sm-5">
	    <input id="endDate" name="endDate" class="form-control fa fa-calendar" readonly="readonly" type="text" th:value="${startDate}">
	</div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">设置额度:</label>
	<div class="col-sm-5">
	    <input id="limit" name="limit" class="form-control" type="text"th:value="${limit}">
	</div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <input id="f1" name="fund" type="radio" value="fund1" th:checked="${fund=='fund1'}">
            <label for="f1">fund1</label>&nbsp;&nbsp;

            <input id="f2" name="fund" type="radio" value="fund2" th:checked="${fund=='fund2'}">
            <label for="f2">fund2</label>&nbsp;&nbsp;

            <input id="f3" name="fund" type="radio" value="fund3" th:checked="${fund=='fund3'}">
            <label for="f3">fund3</label>&nbsp;&nbsp;

            <input id="f4" name="fund" type="radio" value="fund4" th:checked="${fund=='fund4'}">
            <label for="f4">fund4</label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8 col-sm-offset-3">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </div>
</form>

还可以这样写,下面是一个验证输入框是否输入时分秒的方法,以及提示信息:
 

$("#submitForm").validate({
        rules: {
            beginTime: {
                required: true,
                // checkTime 自定义验证方法
                checkTime:true
            }
        },
        submitHandler:function(form){
            Pool.submit();
        }
    });

$.validator.addMethod("checkTime",function(value,element,params){
        var checkTime = /^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
        return this.optional(element)||(checkTime.test(value));
    },"*请输入正确的时分秒!");

   PS:如果自定义的方法需要与后台交互,那么ajax请求需设置同步【async : false】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值