javascript - 银行卡验证第一次没效果，第二次才有，附代码，麻烦大神帮看下。

Question

1.如下图，第一次验证的时候弹出框是空的也就是没验证，弹出框是失去焦点事件弹出的；

2.第二次验证就可以成功了，但是必须在输入框内再输入或删除值，也就是说我第一次如果输入完我的银行卡号，没有验证，如果不在输入框内做删除一个数字或添加一个数字这种动作的情况下，再点击然后失去焦点也是不验证的（图片为以触发事件）；

3.以下为代码请大神们帮看下，我找了好久也没找到，万分感谢！
HTML：

<p id="bankCard">
            <span>银行卡号</span>
            <p id="show"><img src="img/cue.png"></p>
            <p class="parentCls">
            <input type="text" name="BKcard" placeholder="仅支持储蓄卡" id="BKcard" autocomplete = "off" maxlength="23" class="inputElem" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" />
            </p>
   </p>

script：

//bin码验证
    $.fn.cncard = function(options){

        var container = $(this);

        options = $.extend({
        display:''
        },options);

        var display=options.display;

        function cardFormBank(num){

            var cards = [
            {
            "bin": 84336,
            "bankName": "浦发银行",
            "bankNB": "310290000013"
            },
            {
            "bin": 84342,
            "bankName": "浦发银行",
            "bankNB": "310290000013"
            },
            {
            "bin": 84361,
            "bankName": "浦发银行",
            "bankNB": "310290000013"
            }
            ];
            //循环查询银行，存在则返回该银行的数组
            for(var _i = 0,_len = cards.length; _i<_len;_i++){
                var card = cards[_i];
                if(card.bin==num)
                {
                    return card;
                };
            };
            //循环结束，无相关数据，则返回''
            if(_i=_len){
                return '';
            };
        };

        function checkCardNum(e){
            var binNum="10,9,8,7,6,5,4,3";
            var arr=binNum.split(",");
            var blean=true;
            for(n=0;n<arr.length;n++){
                //输入的卡号变为字符串同时截取前arr[i]位
                var cardNum = e.toString().substring(0,arr[n]);
                //变为数字
                cardNum = parseInt(cardNum);
                //进入cardFormBank()函数进行查询
                var a = cardFormBank(cardNum);
                //若无相关数据返回false，显示其他银行，否则返回银行名称

                if(a == null || a =='' || a =='undefined'){
                    blean=false;
                    continue;
                }else{
                blean=true;
                return a.bankName;
                }    
            }
            if(!blean){
                return "不支持的银行";
            }
        };
        $(container).change(function(){ 
            //获取输入框的银行卡号
            var num = $(this).val();

            //检测是否为数字且大于16位小于19位，否则显示银行卡位数不正确
            if(!isNaN(num) && num.length>=19 && num.length<=23){
                var result=checkCardNum(num);
                $(display).html(result);
            }else{
                $(display).html("银行卡位数不正确");
            }
        });
    };

大神们我是新手，如果可以请把错误说详细点，简单几句点拨我怕我还是弄不明白，感谢！

Answer 1

代码里错误还是有点多，我处理了一些，后面整在 jsfiddle 上了。

你说的第一次验证不过的问题我没发现，可能你已经解决了吧。change 事件会在内容改变并失去焦点的时候触发，如果你没改内容失去焦点也想触发事件，应该用 blur 事件。

//bin码验证
$.fn.cncard = function(options) {

    var container = $(this);

    options = $.extend({
        display: ""
    }, options);

    var display = options.display;

    function cardFormBank(num) {
        var cards = [
            {
                "bin": 84336,
                "bankName": "浦发银行",
                "bankNB": "310290000013"
            },
            {
                "bin": 84342,
                "bankName": "浦发银行",
                "bankNB": "310290000013"
            },
            {
                "bin": 84361,
                "bankName": "浦发银行",
                "bankNB": "310290000013"
            }
        ];

        //循环查询银行，存在则返回该银行的数组
        for (var _i = 0, _len = cards.length; _i < _len; _i++) {
            var card = cards[_i];
            if (card.bin == num) {
                return card;
            }
        }

        //循环结束，无相关数据，则返回''
        // 这里不需要判断，因为符合条件的肯定走不到这里来（上面已经 return 了）
        return "";
    }

    function checkCardNum(e) {
        var binNum = "10,9,8,7,6,5,4,3";
        var arr = binNum.split(",");
        var blean = true;
        for (n = 0; n < arr.length; n++) {
            //输入的卡号变为字符串同时截取前arr[i]位
            var cardNum = e.toString().substring(0, arr[n]);
            //变为数字
            cardNum = parseInt(cardNum);
            //进入cardFormBank()函数进行查询
            var a = cardFormBank(cardNum);
            //若无相关数据返回false，显示其他银行，否则返回银行名称

            // if (a == null || a == "" || a == "undefined") {
            //     blean = false;
            //     continue;
            // } else {
            //     blean = true;
            //     return a.bankName;
            // }

            // a 有值就说明找到了，直接返回 a.bankName 就好，
            // 其它情况自动继续循环，不需要自己 continue 
            if (a) {
                return a.bankName;
            }
        }

        // 找到的情况在上面已经返回了，这里直接返回错误消息就行
        // if (!blean) {
            return "不支持的银行";
        //}
    }

    $(container).change(function() {
        //获取输入框的银行卡号
        var num = $(this).val();

        //检测是否为数字且大于16位小于19位，否则显示银行卡位数不正确
        if (!isNaN(num) && num.length >= 19 && num.length <= 23) {
            var result = checkCardNum(num);
            $(display).html(result);
        } else {
            $(display).html("银行卡位数不正确");
        }
    });
};

https://jsfiddle.net/3abjLrf6/

Answer 2

我说一个可能的原因:

if(!isNaN(num) && num.length >= 19 && num.length <= 23)

这个判断的意思为：

如果num不是NaN且其长度在19-23之间,那么通过。
那么我举一个例子:

var x = "1212 1212 1212 1212"
// undefined
!isNaN(x)
// false
x.length
// 19

并附上一张图片:

并且用你在checkCardNum中的操作来执行:

所以我猜想可能是这个地方出现错误。

---------------update------------------
刚刚又瞟了一眼，找到了另外一个错误(不过从结果上来说，这样写无关紧要):

Answer 3

你事件换成keyup试试