//表单校验
$("#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>
<input id="f2" name="fund" type="radio" value="fund2" th:checked="${fund=='fund2'}">
<label for="f2">fund2</label>
<input id="f3" name="fund" type="radio" value="fund3" th:checked="${fund=='fund3'}">
<label for="f3">fund3</label>
<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】