使用十进制精度和小数位数验证输入
validate input with decimal precision and scale
我正在尝试创建一个 javascript 函数,该函数在 input
上的 keypress
事件中调用,它执行以下操作:
- 输入应该是格式为 (5,2) => (XXXXX.YY) 的有效小数,它是函数的变量。如果用户添加任何不符合上述格式的值,将限制输入。
- 如果现有输入以
.
开头,则自动将 0
添加到开头
HTML
<input type="text" onkeypress="return checkDecimal(event, this, 5, 2);" id="price2" value="27.15">
Javascript
function checkDecimal(evt, item, lenBeforeDecimal, lenAfterDecimal) {
var charCode = evt.which;
var trimmed = $(item).val().replace(/\b^0+/g, "");
if(checkStartsWith(trimmed, '.') == true){
trimmed = '0' + trimmed;
}
//Allow following keys
//8 = Backspace, 9 = Tab
if(charCode == 8 || charCode == 9){
return true;
}
//Only a single '.' is to be allowed
if(charCode == 46){
var dotOccurrences = (trimmed.match(/\./g) || []).length;
if(dotOccurrences != undefined && dotOccurrences == 1){
return false;
}else{
return true;
}
}
if (charCode > 31 && ((charCode < 48) || (charCode > 57))) {
return false;
}
if ($(item).val() != trimmed){
$(item).val(trimmed);}
//Check the start and end length
if(trimmed.indexOf('.') == -1){
if(trimmed.length >= parseInt(lenBeforeDecimal)){
return false;
}
}else{
var inputArr = trimmed.split(".");
if(inputArr[0].length > parseInt(lenBeforeDecimal) || inputArr[1].length >= parseInt(lenAfterDecimal)){
return false;
}
}
return true;
}
function checkStartsWith(str, prefix){
return str.indexOf(prefix) === 0;
}
问题
- 如果用户输入
12345.9
,然后在 5
之后移动插入符位置,用户可以在小数点前添加另一个数字 123456.9
,这是不允许的。
- 如果用户输入
1.9
然后删除1
并添加5
,最后添加5
并且输入的值变为0.95
并且不是 5.9
考虑使用如下正则表达式:
/^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
允许所有内容,包括您所需的格式,但如果数字部分超过 5 位或小数部分超过 2 位,则 returns 为 false,例如:
<input type="text" onkeyup="check(this.value)"><span id="er"></span>
<script>
function check(v) {
var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
document.getElementById('er').innerHTML = re.test(v);
}
</script>
您需要对最终值进行单独验证,例如
/^\d{5}\.\d{2}$/.test(value);
确保它是所需的格式。
我不明白向“.”添加前导零的要求。因为无论如何用户都必须输入 5 个前导数字(除非我误解了这个问题)。
我正在尝试创建一个 javascript 函数,该函数在 input
上的 keypress
事件中调用,它执行以下操作:
- 输入应该是格式为 (5,2) => (XXXXX.YY) 的有效小数,它是函数的变量。如果用户添加任何不符合上述格式的值,将限制输入。
- 如果现有输入以
.
开头,则自动将0
添加到开头
HTML
<input type="text" onkeypress="return checkDecimal(event, this, 5, 2);" id="price2" value="27.15">
Javascript
function checkDecimal(evt, item, lenBeforeDecimal, lenAfterDecimal) {
var charCode = evt.which;
var trimmed = $(item).val().replace(/\b^0+/g, "");
if(checkStartsWith(trimmed, '.') == true){
trimmed = '0' + trimmed;
}
//Allow following keys
//8 = Backspace, 9 = Tab
if(charCode == 8 || charCode == 9){
return true;
}
//Only a single '.' is to be allowed
if(charCode == 46){
var dotOccurrences = (trimmed.match(/\./g) || []).length;
if(dotOccurrences != undefined && dotOccurrences == 1){
return false;
}else{
return true;
}
}
if (charCode > 31 && ((charCode < 48) || (charCode > 57))) {
return false;
}
if ($(item).val() != trimmed){
$(item).val(trimmed);}
//Check the start and end length
if(trimmed.indexOf('.') == -1){
if(trimmed.length >= parseInt(lenBeforeDecimal)){
return false;
}
}else{
var inputArr = trimmed.split(".");
if(inputArr[0].length > parseInt(lenBeforeDecimal) || inputArr[1].length >= parseInt(lenAfterDecimal)){
return false;
}
}
return true;
}
function checkStartsWith(str, prefix){
return str.indexOf(prefix) === 0;
}
问题
- 如果用户输入
12345.9
,然后在5
之后移动插入符位置,用户可以在小数点前添加另一个数字123456.9
,这是不允许的。 - 如果用户输入
1.9
然后删除1
并添加5
,最后添加5
并且输入的值变为0.95
并且不是5.9
考虑使用如下正则表达式:
/^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
允许所有内容,包括您所需的格式,但如果数字部分超过 5 位或小数部分超过 2 位,则 returns 为 false,例如:
<input type="text" onkeyup="check(this.value)"><span id="er"></span>
<script>
function check(v) {
var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
document.getElementById('er').innerHTML = re.test(v);
}
</script>
您需要对最终值进行单独验证,例如
/^\d{5}\.\d{2}$/.test(value);
确保它是所需的格式。
我不明白向“.”添加前导零的要求。因为无论如何用户都必须输入 5 个前导数字(除非我误解了这个问题)。