jQuery计算和键入时使用Mod％规则验证输入字段的总数 [英] JQuery Calculate & Validate Total of Input Fields With Mod% Rules While Typing
本文介绍了jQuery计算和键入时使用Mod％规则验证输入字段的总数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，请帮助我正在尝试验证接受以下0 mod(％)的输入字段:
Hi Please help I am trying to validate my input fields that accept 0 mod(%) of the following:
inputValue % 10 == 0;
inputValue % 20 == 0;
inputValue % 50 == 0;
inputValue % 100 == 0;
inputValue % 200 == 0;
上面的输入不是必需的，但它们至少应是一个输入数据.
The Above Inputs are not required but they should be at least one input data.
总数:
1)如果输入的每个字段的值都不为0 @Mod，则应自动计算并在Tab或KeyUp上显示错误.
Total:
1) Should be auto calculated and shows error on Tab or KeyUp if the value is not 0 @Mod of each field entered.
此字段需要由R 10，R 20，R 50，R 100，R 200中的数量的触发数据自动填充
This field needs to be auto populated by triggered data of the amounts in the R 10, R 20, R 50, R 100, R 200
这是下面的表格:
$(document).ready(function () {
//ar r10 = $("#r10_amount").val();
$("#r10_amount,#r20_amount,#r50_amount,#r100_amount,#r200_amount").each(function () {
$("input").keydown(function (e) {
if (e.which == 9) {
//alert($(this).attr('id'));
var currid = $(this).attr('id');
if (currid == "r10_amount" && (((this.value) % 10 == 0))) {
$('#r10_err').hide();
calculateSum();
//alert('inside');
} else if (e.which == 9 && !isNaN(((this.value) % 10 == 0))){
$('#r10_err').show();
}
if (currid == "r20_amount" && ((this.value) % 20 == 0)) {
$('#r20_err').hide();
calculateSum();
}
else if (e.which == 9 && !isNaN((this.value) % 20 == 0)) {
$('#r20_err').show();
}
//calculateSum();
}
//$(this).keyup(function () {
// alert($(this).attr('id'));
// var currid = $(this).attr('id');
// if (((this.value) % 10 == 0) && currid=="r10_amount") {
// $("#r10_err").hide();
// calculateSum();
// $(this).focus(false);
// } else {
// $("#r10_err").show();
// }
// if (((this.value) % 20 == 0) && currid == "r20_amount") {
// $("#r10_err").hide();
// $("#r20_err").hide();
// calculatesum();
// } else {
// $("#r20_err").show();
// }
//});
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("#r10_amount,#r20_amount,#r50_amount,#r100_amount,#r200_amount").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#total").html(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>2. Capture Notes:</legend>
<div class="col-md-3"></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R10</span>
<input class="form-control amnt" type="text" name="r10" id="r10_amount" placeholder="R0" />
<span class="input-group-addon" style="color:red;display:none;" id="r10_err">Invalid Amount</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R20</span>
<input class="form-control amnt" type="text" name="r20" id="r20_amount" placeholder="R0" />
<span class="input-group-addon" style="color:red;display:none;" id="r20_err">Invalid Amount</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R50</span>
<input class="form-control amnt" type="text" name="r50" id="r50_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R100</span>
<input class="form-control amnt" type="text" name="r100" id="r100_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R200</span>
<input class="form-control amnt" type="text" name="r200" id="r200_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>Total</span>
<span class="input-group-addon" id="total"><i class=""></i>0</span>
</div>
</div>
<div class="form-group">
<div class="row pull-right">
<button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-send"></i> SUBMIT</button>
</div>
</div>
</div>
<div class="col-md-5"></div>
</fieldset>
</form>
推荐答案
我在每个input中添加了一个属性data，该属性具有应使用的模数(例如10、20、50等). )
I added an attribute data in every input where it have a modulus that should be used (e.g 10, 20, 50, etc...)
然后将keyup侦听器添加到输入中，以检查输入的值.
每次键入时，它都会在另一个函数中计算总数.
then I added a keyup listener to the inputs to check the values typed.
every time that is typed, it calculate the total in another function.
检查以下代码:
$(".amnt").on("keyup", function(){
let mod = parseInt($(this).data("mod"));
let val = parseInt(this.value);
if (this.value.trim().length < 1){
this.className = "form-control amnt";
} else if (val % mod != 0){
$(this).removeClass("correct")
$(this).addClass("error");
} else{
$(this).removeClass("error")
$(this).addClass("correct");
}
CalculateTotal();
})
function CalculateTotal(){
var total = 0;
$(".amnt").each(function(){
if ($(this).hasClass("correct")){
total += parseInt(this.value);
}
})
$("#total").text(total)
}
.error{
border: 2px solid red;
}
.correct{
border: 2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>2. Capture Notes:</legend>
<div class="col-md-3"></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R10</span>
<input class="form-control amnt" type="text" data-mod="10" id="r10_amount" placeholder="R0" />
<span class="input-group-addon" style="color:red;display:none;" id="r10_err">Invalid Amount</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R20</span>
<input class="form-control amnt" type="text" data-mod="20" id="r20_amount" placeholder="R0" />
<span class="input-group-addon" style="color:red;display:none;" id="r20_err">Invalid Amount</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R50</span>
<input class="form-control amnt" type="text" data-mod="50" id="r50_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R100</span>
<input class="form-control amnt" type="text" data-mod="100" id="r100_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>R200</span>
<input class="form-control amnt" type="text" data-mod="200" id="r200_amount" placeholder="R0" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i>Total</span>
<span class="input-group-addon" id="total"><i class=""></i>0</span>
</div>
</div>
<div class="form-group">
<div class="row pull-right">
<button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-send"></i> SUBMIT</button>
</div>
</div>
</div>
<div class="col-md-5"></div>
</fieldset>
</form>
这篇关于jQuery计算和键入时使用Mod％规则验证输入字段的总数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
