vue 正则验证 input 输入0-100的正整数 删除input框后面的上下箭头 样式 ant design vue a-input-number标签
//推荐使用 formatter :实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改代码示例:<a-input-numberv-model:value="item.rankScore":min="0":max="100":formatter="formatter"@change="handleChange(item)"style="
·
//推荐使用 formatter :
实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改
代码示例:
<a-input-number
v-model:value="item.rankScore"
:min="0"
:max="100"
:formatter="formatter"
@change="handleChange(item)"
style="width: 60px;"
/>
//不推荐使用
//只是增加提示 ,输入框的值在失去焦点的时候变为100,
handleChange(){
var reg = /^([0-9]{1,2}|100)$/; //0-100的正整数
console.log(item.rankScore);
if(!reg.test(item.rankScore)){
message.error("只能输入0-100的正整数");
}
}
//推荐使用: 实时验证,输入值大于100时显示100,并且不显示多余的数字;值为空时显示0 ;如果不满足需求你可以在接着改
formatter(value){
let reg = /^([0-9]{1,2}|100)$/; //0-100的正整数
let reg1 = /\D/g;
if(reg.test(value)){
return Number(value.replace(reg1,'')).toLocaleString();
}else{
// value = 100
if(value == ''){
return 0;
}else{
value = 100;
return value
}
}
}
//去除 input输入框后面的小箭头
/deep/.ant-input-number{
width: 100%;
height: 100%;
box-shadow: none;
.ant-input-number-input-wrap{
height: 100%;
input{
height: 100%;
text-align: center;
}
}
.ant-input-number-handler-wrap{
display: none;
}
}
实例二:
需求,只能输入数字 ,并且只能输入0-100的正整数,如果输入大于100的数变为100,禁止输入字母和其他字符,
const formatter = value => {
let reg = /^([0-9]{1,2}|100)$/;
let reg1 = /\D/g;
if(reg.test(value)){
return Number(value.replace(reg1,'')).toLocaleString();
}else{
if(value > 100){ //输入值大于100时返回100
return 100;
}else{
return value.replace(reg1,''); //禁止输入其他字符
}
}
};
更多推荐
已为社区贡献10条内容
所有评论(0)