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

问题描述

问 题

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

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

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

<div id="bankCard">
            <span>银行卡号</span>
            <p id="show"><img src="img/cue.png"></p>
            <div 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()" />
            </div>
   </div>

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("银行卡位数不正确");
            }
        });
    };

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

解决方案

代码里错误还是有点多，我处理了一些，后面整在 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/

这篇关于javascript - 银行卡验证第一次没效果，第二次才有，附代码，麻烦大神帮看下。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！