我有一个<input type="number">,我想将用户的输入限制为纯数字或带有小数点后最多2位的数字。
基本上,我是在要求一个价格输入。
我想避免使用正则表达式。有办法吗?
<input type="number" required name="price" min="0" value="0" step="any">
我有一个<input type="number">,我想将用户的输入限制为纯数字或带有小数点后最多2位的数字。
基本上,我是在要求一个价格输入。
我想避免使用正则表达式。有办法吗?
<input type="number" required name="price" min="0" value="0" step="any">
当前回答
关于货币,我建议:
<div><label>Amount $
<input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>
参见http://jsfiddle.net/vx3axsk5/1/
HTML5属性“step”,“min”和“pattern”将在表单提交时验证,而不是onblur。如果你有一个模式,你就不需要步骤,如果你有一个步骤,你就不需要模式。因此,您可以使用我的代码返回到step="any",因为模式无论如何都会验证它。
If you'd like to validate onblur, I believe giving the user a visual cue is also helpful like coloring the background red. If the user's browser doesn't support type="number" it will fallback to type="text". If the user's browser doesn't support the HTML5 pattern validation, my JavaScript snippet doesn't prevent the form from submitting, but it gives a visual cue. So for people with poor HTML5 support, and people trying to hack into the database with JavaScript disabled or forging HTTP Requests, you need to validate on the server again anyways. The point with validation on the front-end is for a better user experience. So as long as most of your users have a good experience, it's fine to rely on HTML5 features provided the code will still works and you can validate on the back-end.
其他回答
我对其中一些解决方案有过一段奇怪的编辑经历。从用户的角度来看,这似乎非常有效(只在必要时进行干预):
function handleNumberChanged (e) {
const fixed = parseFloat(e.target.value).toFixed(2).toString()
if (fixed.length < parseFloat(e.target.value).toString().length)
e.target.value = fixed
}
使用step="而不是step="any",因为它允许小数位数任意。“01”,最多允许小数点后两位。
更多详细信息见规范:https://www.w3.org/TR/html/sec-forms.html#the-step-attribute
输入:
step="any"
class="two-decimals"
脚本:
$(".two-decimals").change(function(){
this.value = parseFloat(this.value).toFixed(2);
});
试着在输入类型中只允许2个小数
<input type="number" step="0.01" class="form-control" />
或者使用jQuery的建议@SamohtVII
$( "#ELEMENTID" ).blur(function() {
this.value = parseFloat(this.value).toFixed(2);
});
如果有人正在寻找一个正则表达式,只允许数字与可选的2小数点后
^\d*(\.\d{0,2})?$
例如,我发现下面的解决方案相当可靠
HTML:
<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
JS / JQuery:
$(document).on('keydown', 'input[pattern]', function(e){
var input = $(this);
var oldVal = input.val();
var regex = new RegExp(input.attr('pattern'), 'g');
setTimeout(function(){
var newVal = input.val();
if(!regex.test(newVal)){
input.val(oldVal);
}
}, 1);
});