本文主要是介绍【动态设置输入框的最大值验证】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

动态设置输入框的最大值验证

• jquery.validate.js
• • 目标需求
  • JS实现
  • 问题
  • 校验器查询表

jquery.validate.js

jquery.validate.js 是我最近用于前端表单验证的 一 jquery 插件，好用。但最近也遇到了个 rules设置不生效的问题，这里做个记录。
先来个文档地址 https://jqueryvalidation.org/documentation/

目标需求

这里有个表单，表单内有两字段 ：

1. html 简化的代码如下：

<label for="money1">金额1</label>
<input id="money1" name="money1" />
<label for="money2">金额2</label>
<input id="money2" name="money2" data-val="true"  data-val-required="金额2 不能为空", data-val-range="金额2应在 0 至 金额1 之间" ,data-val-range-min="0",data-val-range-max="$('#money1').val()">

2. 用户在填写金额1后，金额1 成为 金额2 的最大值；

JS实现

写JS前先引入 JQ 和 jquery.validate.js

<script type="text/javascript">
	$(document).ready(function(){
		$("#money1").blur(function(){
			var maxVal = $("#money1").val();
			if(maxVal > 0){
				$("#money2").rules(function(){
					max:maxVal,
					messages:{
						max:"金额2 应在 0 至" + maxVal + "之间"
					}
				});
			}
		});
	});
</script>

问题

到这里功能功能其实已经实现了。但在测试过程中发现一个问题：
在 金额1 blur 事件执行后，金额2的验证中多了一个 max 的验证
但实际使用过程中，当金额2 的值超过 max(即 金额1的值)后使用的 验证范围还是使用下面的提示

data-val-range="金额2应在 0 至 金额1 之间" ,data-val-range-min="0",data-val-range-max="$('#money1').val()"

JS内设置的新范围没有生效！！！

最后在查看了 校验器查询表 （我放在文章最后）做如下修改，就可以了

<script type="text/javascript">
	$(document).ready(function(){
		$("#money1").blur(function(){
			var maxVal = $("#money1").val();
			if(maxVal > 0){
				$("#money2").rules(function(){
					range:[0,maxVal],
					messages:{
						range:"金额2 应在 0 至" + maxVal + "之间"
					}
				});
			}
		});
	});
</script>

校验器查询表

查询表参考地址

这篇关于【动态设置输入框的最大值验证】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！