jQuery 如何验证货币输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18204390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate a currency input
提问by QKWS
I am creating a form, and that includes salary, I need to check if the input value for salary is a valid currency and has two decimal places because that is what the database accepts. If the input for salary has alphabets (a-z) or symbols (!@#%^&*() except for the $ or other currency sign) it should change the border color.
我正在创建一个表单，其中包括薪水，我需要检查薪水的输入值是否是有效货币并且有两位小数，因为这是数据库接受的。如果薪水的输入有字母 (az) 或符号（!@#%^&*() 除了 $ 或其他货币符号），它应该更改边框颜色。
example:
例子：
10000.00
25846.00
213464.12
code:
代码：
function isNumeric(){
var numeric = document.getElementById("txtSalary").value;
var regex = /^\d+(?:\.\d{0,2})$/;
if (regex.test(numeric)){
$("#txtSalary").css("border-color","#FFFFFF");
}else{
$("#txtSalary").css("border-color","#FF0000");
}
}
This is already working as I wanted too, but the problem is I got 6 more input boxes that needs this kind of validation. How can I make that function, when called change the border-color of the specific selector and will return false is the value is not numeric something like:
这也已经按我想要的方式工作了，但问题是我还有 6 个需要这种验证的输入框。如何使该函数在调用时更改特定选择器的边框颜色并返回 false 是该值不是数字，例如：
isNumeric(selector);
function isNumeric(selector){
var regex = /^\d+(?:\.\d{0,2})$/;
$(selector).filter(function() {
return (regex.test(this.value));
}).css("border-color","#FF0000");
}
Thanks!
谢谢！
回答by Someoneinthe
try to use html5 pattern directly on your input:
尝试直接在您的输入上使用 html5 模式：
<input type='text' pattern='^\d+(?:\.\d{0,2})$'/>
it works with all modern browsers. it will make the border red if the pattern is false
它适用于所有现代浏览器。如果模式为假，它将使边框变红
回答by Mohammad Masoudian
function isNumeric(id, border){
var numeric = document.getElementById(id);
var regex = /^\d+(?:\.\d{0,2})$/;
if (regex.test(numeric)){
$('#'+border).css("border-color","#FFFFFF");
}else{
$('#'+border).css("border-color","#FF0000");
}
}
回答by jayp
If you want to use jQuery/JavaScript, then you can just pass your selector like this:
如果你想使用 jQuery/JavaScript，那么你可以像这样传递你的选择器：
function isNumeric(sel){
var $numeric = $(sel);
var regex = /^\d+(?:\.\d{0,2})$/;
if (regex.test($numeric.val())){
$numeric.css("border-color","#FFFFFF");
} else {
$numeric.css("border-color","#FF0000");
}
}
You could also take advantage of the HTMLInputElement's built-in validation (in the candidate recommendation for HTML 5):
您还可以利用HTMLInputElement的内置验证（在 HTML 5 的候选推荐中）：
<input type="text" pattern="^\d+(?:\.\d{0,2})$">
See here.
见这里。
For styling, you can then use the :validand :invalidpseudo-selectors.
对于样式，您可以使用:valid和:invalid伪选择器。
If you need to guarantee cross-browser compatibility, you could use a polyfill like this.
如果您需要保证跨浏览器兼容，你可以使用像填充工具这样。
回答by thelastshadow
If you're hoping to use a css selector instead of Ids, I'd recommend jQuery for cross-browser support, but nevertheless in js you can do:
如果您希望使用 css 选择器而不是 Id，我建议使用 jQuery 进行跨浏览器支持，但在 js 中您可以这样做：
function isNumeric(selector){
var elements = document.querySelector(selector);
var regex = /^\d+(?:\.\d{0,2})$/;
for (var i=0, i < elements.length; i++) {
// i added a test on the value attribute,
// as your original doesn't look like it should work
if (regex.test(elements[i].getAttribute('value'))){
$(elements[i]).css("border-color","#FFFFFF");
}
else{
$(elements[i]).css("border-color","#FF0000");
}
}
}
or a version using jQuery for the selectors:
或使用 jQuery 作为选择器的版本：
function isNumeric(selector){
var elements = $(selector);
var regex = /^\d+(?:\.\d{0,2})$/;
elements.each(function(){
var $this = $(this);
// i added a test on the value attribute,
// as your original doesn't look like it should work
if (regex.test($this.val())){
$this.css("border-color","#FFFFFF");
}
else{
$this.css("border-color","#FF0000");
}
});
}
回答by Mr_Green
You are using jquery, so utilize it. Instead of adding the event in HTML markup, add it in jquery. like this:
您正在使用 jquery，因此请使用它。不是在 HTML 标记中添加事件，而是在 jquery 中添加它。像这样：
$('#textOne,#textTwo,#textThree').on('eventNameHere', isNumeric);
and a small change in your function:
以及您的功能的一个小变化：
function isNumeric(){
var numeric = this.value;
-------
}
UPDATED:
更新：
(If you are notusing textbox events but a button event which needs to handle all the textbox validations):
（如果您使用的不是文本框事件而是需要处理所有文本框验证的按钮事件）：
$('#textOne,#textTwo,#textThree').each(isNumeric);
回答by Chinmay235
function onlyPrice(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if( unicode != 8 )
{
if(unicode < 9 || unicode > 9 && unicode < 46 || unicode > 57 || unicode == 47) {
if(unicode == 37 || unicode == 38) {
return true;
}
else {
return false;
}
}
else {
return true;
}
}
else
{
return true;
}
}
HTML
HTML
<input type="text" name="price" onkeypress="return onlyPrice(event)" />
回答by Khadim Ali
How about trying this?
试试这个怎么样？
jQuery:
jQuery：
<script type="text/javascript">
function AssignNumeric() {
$('.numeric').each(function (i) {
$(this).blur(function () {
var regex = /^\d+(?:\.\d{0,2})$/;
if (regex.test($(this).val())) {
$(this).css("border-color", "#FFFFFF");
} else {
$(this).css("border-color", "#FF0000");
}
});
});
}
$(document).ready(function () {
AssignNumeric();
});
</script>
html:
html：
<input id="Text1" type="text" class="numeric" />
<input id="Text2" type="text" class="numeric" />
<input id="Text3" type="text" class="numeric" />
<input id="Text4" type="text" class="numeric" />
回答by Sergio Gonzalez
I prefer:
<input type='text' pattern='^\d+(?:\.\d{1,2})$'/>
我更喜欢：
<input type='text' pattern='^\d+(?:\.\d{1,2})$'/>
It forces you to have at least one number after the dot, so you wont get anything like:
它强制您在点后至少有一个数字，因此您不会得到以下内容：
10000.
25846
It will only accept:
它只会接受：
10000.1
25846.30
213464.12
Of course you need more server side validations in the case someone wants to bypass this one by changing the tag or javascript in the browser.
当然，如果有人想通过更改浏览器中的标签或 javascript 来绕过此验证，则您需要更多的服务器端验证。
回答by Madbreaks
I needed something that would allow for US-formatted entries that could include a ,thousands separator and optional 2-digit decimal places. I came up with this:
我需要一些可以包含,千位分隔符和可选的 2 位小数位的美国格式条目。我想出了这个：
^[1-9]\d{0,2}(?:,?\d{3})*(?:\.\d{2})?$
Test it here: https://regex101.com/
在这里测试：https: //regex101.com/
