如何validation货币输入
我正在创建一个表单，其中包括工资，我需要检查工资的输入值是否是有效货币并且有两个小数位，因为这是数据库接受的。 如果薪水输入有字母（az）或符号（！@＃％^＆*（）除了$或其他货币符号），它应该改变边框颜色。
例：
10000.00 25846.00 213464.12 码：
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"); } }
这已经按照我的意愿运行了，但问题是我还有6个输入框需要这种validation。 如何在调用时更改特定选择器的border-color并返回false，该值是否为数字，如下所示：
isNumeric(selector); function isNumeric(selector){ var regex = /^\d+(?:\.\d{0,2})$/; $(selector).filter(function() { return (regex.test(this.value)); }).css("border-color","#FF0000"); }
谢谢！
尝试直接在输入上使用html5模式：
它适用于所有现代浏览器。 如果模式为假，它将使边框变红
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"); } }
如果你想使用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"); } }
您还可以利用HTMLInputElement的内置validation（在HTML 5的候选推荐中）：
看到这里 。
对于样式，您可以使用：valid和：invalid伪选择器。
如果您需要保证跨浏览器兼容性，可以使用这样的polyfill。
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
试试这个怎么样？
jQuery的：
HTML：
您正在使用jquery，因此请使用它。 不是在HTML标记中添加事件，而是在jquery中添加它。 像这样：
$('#textOne,#textTwo,#textThree').on('eventNameHere', isNumeric);
你的function有一点变化：
function isNumeric(){ var numeric = this.value; ------- }
更新 ：
（ 如果您没有使用文本框事件，而是需要处理所有文本框validation的按钮事件 ）：
$('#textOne,#textTwo,#textThree').each(isNumeric);
如果您希望使用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"); } } }
或者使用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"); } }); }
我更喜欢：
它迫使你在点之后至少有一个数字，所以你不会得到类似的东西：
10000. 25846
它只接受：
10000.1 25846.30 213464.12
当然，如果有人想通过更改浏览器中的标记或javascript来绕过这一点，则需要更多的服务器端validation。