验证两个输入字段的总和
[英]Validate sum of two input fields
问题描述
I am trying to calculate sum of two fields and validate them. 
我正在尝试计算两个字段的总和并对其进行验证。 Basically, I need sum of the two input field's value is greater than 100, and want to display a prompt if the sum is less than 100. 基本上，我需要两个输入字段的值之和大于100，并且如果总和小于100，则要显示提示。
So far, I have this: 到目前为止，我有这个：
<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">
<script>
$(document).ready(function(){
var val1 = $("#value1").val();
var val2 = $("#value2").val();
});
</script>
However, I don't know how to validate the result and display a prompt if the sum of these two inputs is less than 100. 但是，如果这两个输入的总和小于100，我不知道如何验证结果并显示提示。
Can you please point me in the right direction? 您能指出我正确的方向吗？
5 个解决方案
解决方案1
1 2017-08-03 06:17:33
- Wrap your inputs in a form 将输入内容包装成表格
- Add submit button to get values into variables 添加提交按钮以将值转换为变量
- Write condition logic 写条件逻辑
- Add an output html node to output the result 添加输出html节点以输出结果
解决方案2
1 2017-08-03 06:22:33
$(document).ready(function() { var val1 = parseInt($("#value1").val()); var val2 = parseInt($("#value2").val()); var sum = val1 + val2; if(sum > 100) { alert(sum+ ' is greater than 100') } else { alert(sum + ' is less than 100') } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" class="input" id="value1" value="70"> <input type="text" class="input" id="value2" value="50">
Check this example. 检查此示例。
解决方案3
0 已采纳 2017-08-03 06:27:07
You need to use focusout to get the real-time sum and alert the user if sum is less than 100, You can add keyup events too, but that won't make sense as it would start alerting as soon as you type. 您需要使用focusout来获取实时总和，并在总和小于100时向用户focusout警报。您也可以添加keyup事件，但这没有意义，因为一旦您键入便会开始发出警报。 IMO, you should have a button, and on click on that button, the calculation and validation shoud be triggered IMO，您应该有一个按钮，然后单击该按钮，应触发计算和验证
And if you already have values populated in the input fields, you just need to call / trigger the focusout or click event of the button: : 并且，如果您已经在输入字段中填充了值，则只需调用/触发按钮的focusout或click事件：
$("#value1, #value2").on('focusout', function() { var value2 = parseInt($("#value2").val()) > 0 ? parseInt($("#value2").val()) : 0; var value1 = parseInt($("#value1").val()) > 0 ? parseInt($("#value1").val()) : 0 var sumOfValues = value1 + value2; if (sumOfValues < 100) { console.log('Your sum is ' + sumOfValues + ' which is less than 100'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="input" id="value1"> <input type="text" class="input" id="value2">
With button: 带按钮：
$("button").on('click', function() { var value2 = parseInt($("#value2").val()) > 0 ? parseInt($("#value2").val()) : 0; var value1 = parseInt($("#value1").val()) > 0 ? parseInt($("#value1").val()) : 0 var sumOfValues = value1 + value2; if (sumOfValues < 100) { console.log('Your sum is ' + sumOfValues + ' which is less than 100'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="input" id="value1"> <input type="text" class="input" id="value2"> <button>Calculate</button>
解决方案4
0 2017-08-03 06:33:37
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> function myFunction() { var val1 = $("#value1").val(); var val2 = $("#value2").val(); var sum = parseInt(val1) + parseInt (val2); if(sum > 100) { alert('Sum '+sum+ ' is greater than 100') } else { alert('Sum '+sum+ ' is less than 100') } } </script> </head> <body> <input type="text" class="input" id="value1"> <input type="text" class="input" id="value2"> <button type="button" onclick="myFunction()">Check</button> </body> </html>
解决方案5
0 2017-08-03 07:13:10
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">
<button type="sumbit" name="submit" id="submit">check sum</button>
<p id="resultMessage"></p>
<script>
$(document).ready(function() {
// on button pressed
$('#submit').on('click', function() {
var val1 = $("#value1").val();
var val2 = $("#value2").val();
// numeric validation
if (!isNumeric(val1) || !isNumeric(val2)) {
$('#resultMessage').text('Some field contains not a number');
return;
}
// + operator converts input Strings to Number type
var sum = +val1 + +val2;
if (sum > 100) {
// if sum greather than 100
$('#resultMessage').text('Sum is greather than 100 (' + sum + ')');
} else if (sum < 100) {
// some code if sum less than 100 ...
$('#resultMessage').text('Sum is less than 100 (' + sum + ')');
} else {
// sum is 100
$('#resultMessage').text('Sum equals 100');
}
});
// function for numeric validation
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.