jQueryValidate插件-使用范围内的变量方法验证和错误消息

Question

我使用的是jQuery验证插件，并且我使用的range方法在第一次输入中需要一个介于0和100之间的数字。在我的第二个输入中，我想要一个介于第一个输入的数字和100之间的数字。例如，如果在第一个输入中输入10，则在第二个输入中范围应介于10和100之间。如果要在第二个输入中输入5，则应该会出现一个错误，显示Please enter a value between 10 and 100。这可能吗？

var rangeVal = null;
$('form').submit(function(e){
return false;
});
$('#range').keyup(function() {
rangeVal = $(this).val();
console.log(rangeVal);
});
$('form').validate({
rules: {
range: {
range: [0, 100]
},
range2: {
range: [rangeVal, 100]
}
},
messages: {
range: {
range: "Please enter a value between 0 and 100"
},
range2: {
range: "Please enter a value between " + rangeVal + " and 100"
}
}
});

label {
display:block;
margin-top:10px;
}
input {
display:block;
}
input[type="submit"] {
margin-top:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<form>
<label>Range1 (0 - 100)
<input id="range" name="range" type="number" />
</label>
<label>Range2 (Range1 - 100)
<input id="range2" name="range2" type="number" />
</label>
<input type="submit" />
</form>

Answer 1

我通过将规则更改为函数并在消息中使用模板参数来解决此问题：

var rangeVal = null;
$('form').submit(function(e){
e.preventDefault();
});
$('#range').keyup(function() {
rangeVal = $(this).val();
});
$('form').validate({
rules: {
range: {
range: [0, 100]
},
range2: {
range: function () {
return [rangeVal, 100];
}
},
},
messages: {
range: {
range: "Please enter a value between 0 and 100"
},
range2: {
range: "Please enter a value between {0} and 100"
}
}
});

label {
display:block;
margin-top:10px;
}
input {
display:block;
}
input[type="submit"] {
margin-top:30px;
}
.error {
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<form>
<label>Range1 (0 - 100)
<input id="range" name="range" type="number" />
</label>
<label>Range2 (Range1 - 100)
<input id="range2" name="range2" type="number" />
</label>
<input type="submit" />
</form>