react中获取银行卡卡号并按格式显示

在本次项目中用到的东西不是很难，但是可以了解了一个小模块从产生到优化的过程；
下面是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();
}

这个小小的项目模块就这样慢慢的完善啦~
加一张美图，呼呼

野薇薇

react中获取银行卡卡号并按格式显示

推荐阅读更多精彩内容