**需求:**客户要求说的银行卡卡号太长全部链接在一起不好区分,不好观察判断是否输入错误要显示成xxxx xxxx xxxx xxxx 样式的。
**总结:**记录这个是就是因为自己研究了半天,就记录一下,开始的思路是因为在input框中显示,所以考虑的是通过input框去调取数据,然后将值取出来,后set到一个地方在去取出来,但是取到的值可以是需求样式,但是显示到框里面就不会改变,然后自己有百度了一些,延时加载的方法,还是不能起作用,可能还是自己能力的不足,思维没有放开,老想着值在input框就要去不停的去操作input框,而没有把思维放开去操作From表单,当值想到操作from表单后就会有你想要的答案
<FormItem label="账号">
{getFieldDecorator('accno', {
initialValue: '',
validateTrigger: 'onBlur',
getValueFromEvent: e => {
// 进行你想要的操作
const num1 = e.target.value;
const num2 = num1.replace(/\s*/g, '');
const result = [];
for (let i = 0; i < num2.length; i += 1) {
if (i % 4 === 0 && i !== 0) {
result.push(' ' + num2.charAt(i));
} else {
result.push(num2.charAt(i));
}
}
const num3 = result.join('');
return num3;
},
rules: [{
required: true, message: '请输入账号',
},
{
pattern: /^[\d+\s*/g]{1,23}$/,
message: '只能为数字,小于等于19位!',
}],
})(<Input placeholder="必填 请输入" type="text" onBlur={this.hbQuery} />)}
</FormItem>
方法优化
buyCard(value) {
//格式化银行卡号
if (value == undefined) {
return value;
} else {
return (value = value
.replace(/\s/g, "")
.replace(/(\d{4})(?=\d)/g, "$1 "));
}
}
这样就可以达到想要的结果了,你在提交表单的时候记得要把值得空格给去掉提交给后台,但是在返现的时候需要在框里触动一下才会显示你需要的样式,如果你不触发就会显示成这样的