jQuery Validator compare校验器演示页面 - DIY：代码在线编辑与演示页面

代码类型:

杂项:

启用CSS/JS语法检查
监测脚本运行错误
禁止库文件重复

文档类型:

JS库文件:

手动添加:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery Validator 演示页面</title>		
	</head>
<body>
<form action="https://codeplayer.vip/">
    <div>
        <label>借款金额</label>：
        <input id="total" name="total" type="text" >
    </div>
    <div>
        <label>最小投标金额</label>：
        <input id="min" name="min" type="text" >
    </div>
    <div>
        <label>最大投标金额</label>：
        <input id="max" name="max" type="text" >
    </div>
    <div>
        <label>开始时间</label>：
        <input id="beginTime" name="beginTime" type="text" >
    </div>
    <div>
        <label>结束时间</label>：
        <input id="endTime" name="endTime" type="text" >
    </div>
    <input type="submit" value="提交" />
</form>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://codeplayer.vip/app/static/js/layer/layer.js"></script>
<script src="https://codeplayer.vip/app/static/js/jquery-validator-1.3.js"></script>
<script type="text/javascript">
	// 为了让提示更美观，扩展jQuery原型对象，添加layer的tips方法
	$.fn.tips = function(msg, delay){
		layer.tips(msg, this, delay || 3000);
	};

var v = new V();

// 在表单提交时执行校验
	$("form").v("submit", {
		"#total": {
			format: "number/money", // 必须是两位小数以内的数字
			range: "[100,]", // 100元起投
			// 最小投标金额不能大于最大投标金额，最大投标金额不能大于借款总额
			compare: "#min <= #max && #max <= this",
			propagation: true,
			message: {
				// 提示信息其实还不够友好
				compare: "{#min}不能大于{#max}，{#max}不能大于{label}"
			}
		},

"#beginTime": {
			required: "continue",
			format:"date/datetime", // "yyyy-MM-dd HH:mm:ss"格式
			// 开始时间可以为空，结束时间也可以为空
			// 但如果都不为空，则开始时间不能大于结束时间
			compare: "!this || !#endTime || this <= #endTime",
			propagation: true,
			message: {
				compare: "{label}不能大于{#endTime}"
			}
		}
	});
</script>
</body>
</html>

相关文章:

代码类型:

杂项:

文档类型:

JS库文件:

手动添加: