Javascript / jQuery打破了页面的格式

Question

添加以下代码时，我的页面格式不正确：

$('#Inventory_accountNumber').blur(function(){
    var accounts = $(this).val();
    accounts = accounts.replace(/-/g,'');
    var accountNum = [];
    accountNum = accounts.split(",");
    for(var i=0;i<accountNum.length;i++) {
        var newstr = '';
        if(accountNum[i].length == 24) {
            newstr += accountNum[i].substring(0,4) + '-';
            newstr += accountNum[i].substring(4,7) + '-';
            newstr += accountNum[i].substring(7,10) + '-';
            newstr += accountNum[i].substring(10,14) + '-';
            newstr += accountNum[i].substring(14,20) + '-';
            newstr += accountNum[i].substring(20,24) + '-';
            newstr += '0000-000';
            accountNum[i] = newstr;
        }
        else if(accountNum[i].length == 31) {
            newstr += accountNum[i].substring(0,4) + '-';
            newstr += accountNum[i].substring(4,7) + '-';
            newstr += accountNum[i].substring(7,10) + '-';
            newstr += accountNum[i].substring(10,14) + '-';
            newstr += accountNum[i].substring(14,20) + '-';
            newstr += accountNum[i].substring(20,24) + '-';
            newstr += accountNum[i].substring(24,28) + '-';
            newstr += accountNum[i].substring(28,31);
            accountNum[i] = newstr;
        }
    }
    accountNum.join(',');
    $(this).val(accountNum);

});

jsfiddle说明了这个代码正在使用中： http://jsfiddle.net/Lwv4U/14/

正如您所看到的，它适用于jsfiddle，但存在实时格式问题。下面的屏幕截图描绘了添加和不添加代码的页面。此代码是两个代码库之间代码中唯一的变化。如果重要的话，Yii被用作框架。

之前

后

Answer 1

jsfiddle.net/Lwv4U/25

JS：

$('#Inventory_accountNumber').blur(function(){
  $(this).val(function(index, value){
    var str = value.replace(/[^\d]/g,'');
    if (str.length < 10) return str;  
    return str.match(/(\d{4})?(\d{3})?(\d{3})?(\d{4})?(\d{6})?(\d{4})?(\d{4})?(\d+)?/)
    .slice(1).join("-").replace(/\-+/g,'-');
  });
});