在我的项目中,我有一个名为 Rate 的字段,它可以接受这些值: 例如:
- 2.32
- 2.32%
条件:
- 只允许输入数字。
- 小数点后两位。
- 不允许使用字母和其他符号。
这是我正在使用的代码片段
handleCheck = (e)=> {
let onlyNums = e.target.value.replace(/[^0-9\.,%]/g, '');
var str = '';
var isperc = false;
if(onlyNums.indexOf('.') !== -1)
{
var arr = onlyNums.split(".");
if(arr[1].length >2)
{
if( arr[1].indexOf('%') !== -1)
isperc = true;
arr[1] = arr[1].slice(0, 2);
}
if(isperc)
e.target.value = arr[0] + '.' + arr[1] + '%';
else
e.target.value = arr[0] + '.' + arr[1];
}
if(onlyNums.indexOf('%') !== -1)
{
str = onlyNums.indexOf('%');
var start = (str + 1);
onlyNums = e.target.value.slice(0, start);
e.target.value=onlyNums;
}
}
上图就是问题所在。 Rate 字段也接受小数点前的字母。
我应该如何修改我的代码来避免这个问题?或者
我如何转换 \d+(\.\d\d)?%?
正则表达式类似于我在问题中的 replace 函数中使用的正则表达式,因为这个正则表达式是不使用我的代码
最佳答案
我对 regex 做了一些改动,并在顶部添加了一个 parseFloat()
。还调用以在第一次 replace 调用之后更改输入的值。这可能是您一开始就错过的东西。
class Input extends React.Component {
handleCheck = (e)=> {
let onlyNums = e.target.value.replace(/[^.%\d]?(\.\%)/g, '');
e.target.value = isNaN(parseFloat(onlyNums))?'':parseFloat(onlyNums);
var str = '';
var isperc = false;
if(onlyNums.indexOf('.') !== -1)
{
var arr = onlyNums.split(".");
if(arr[1].length >2)
{
if( arr[1].indexOf('%') !== -1)
isperc = true;
arr[1] = arr[1].slice(0, 2);
}
if(isperc)
e.target.value = arr[0] + '.' + arr[1] + '%';
else
e.target.value = arr[0] + '.' + arr[1];
}
if(onlyNums.indexOf('%') !== -1)
{
str = onlyNums.indexOf('%');
var start = (str + 1);
onlyNums = e.target.value.slice(0, start);
e.target.value=onlyNums;
}
}
render() {
return (
<input onChange={this.handleCheck} />
);
}
}
ReactDOM.render(
<Input />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
</div>
编辑(一种更正则表达式的方法):
class Input extends React.Component {
constructor(props) {
super(props);
this.input_prev_value = ''; //property for storing previous input value
}
handleCheck = (e)=> {
let input_value = e.target.value.replace(/(\.\%)/,''); //takes care of '.%' case
if((input_value.search(/^[0]{1,}[\d]/)!==-1 || // takes care of leading zeroes
input_value.search(/^(\d+)([\.])?([\d]{1,2})?([\%])?$/)===-1) && //main pattern
input_value!=='')
e.target.value = this.input_prev_value;
else {
e.target.value = input_value;
this.input_prev_value = e.target.value;
}
}
render() {
return (
<input onChange={this.handleCheck} />
);
}
}
ReactDOM.render(
<Input />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 数字验证中的逻辑错误以及 React Js 中的百分比符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53498073/