在本次项目中用到的东西不是很难，但是可以了解了一个小模块从产生到优化的过程；
下面是UI给到的设计图：
输入的银行号格式要求：1111 2222 3333 4444
既然要格式规定，我们就不能让用户输入什么直接显示在屏幕上面
首先，我们需要获取到用户输入的信息
<input id="cardNo"
className="cardDtInput"
onInput={this.getValue}
type="text" placeholder="请填写银行卡卡号"/>
getValue(event){
console.log(event.target.value)
}
接下来，将获取到的数据进行格式转变，四个为一组，组间用空格间隔
notice:用户输入的是字符串，转化为数组更易操作
var numDivide = function (num) {
var str = '' ;
num.split('').map(function (item,index) {
(index+1) % 4 == 0 ? str = str + item + ' ': str += item;
})
return str;
}
然后，将函数引入,将返回的字符串赋值给input的value值即可，but !!!!发现一个问题！terrible
经测试，结果是这样式儿的：
原因：组间插入的空格在之后的事件触发中被当作字符串的内容传入numDivide 函数中
所以，我们想 可以在用户输入完成之后再将修改后的字符显示在input中
<input id="cardNo"
className=“cardDtInput”
onInput={this.getValue}
onBlur={this.cardNoStyle}
type="text" placeholder="请填写银行卡卡号"/>
cardNoStyle(event){
return event.target.value = numDivide(event.target.value);
}
嗯 完美！
等等。。。。。
用户发现输错了，重新想要添加一位，再次离开时却成了这个样子。。。。
我们的函数numDivide有问题啊
截取的卡号应该是只有数字不含空格的哟！
改进：
var numDivide = function (num) {
var str = '' ;
var reg = /\s/g;//加入正则，过滤掉字符串中的空格
num.replace( reg, "").split('').map(function (item,index) {
(index+1) % 4 == 0 ? str = str + item + ' ': str += item;
})
return str;
}
哈哈~完工！
no,后续还有一些别的细化工作要做，例如：输入非数字提示‘请输入有效卡号’等等~
final-demo
/*
* 用途：按一定规则分割字符串
* 第1个参数是要分割的字符串 比如：18801233565
* 第2个参数是每隔多少个字符分割 比如：18801233565 分成 188 0123 3565 就传[3,4,4];
要分成123 456 789 就传[3]；
* 第3个参数是用什么来分割 比如：18801233565 分成 188-0123-3565 就传'-'
* */
function validNum(num,arr,str){
var newPhoneNum = [];
if(arr.length == 1){
while(num.length > 0){
var newNum = num.slice(0,arr[0]);
num = num.substr(arr[0]);
newPhoneNum.push(newNum);
}
}else {
arr.map((item,i)=>{
var newNum = num.slice(0,item);
num = num.substr(item);
newPhoneNum.push(newNum);
});
}
return newPhoneNum.join(str).trim();
}
这个小小的项目模块就这样慢慢的完善啦~
加一张美图，呼呼
野薇薇
