Question

我正在尝试在用户键入时实现详尽的字段格式（这里是比利时电话号码）。

这是代码：

FormatZoneNumberOther: function (field, event, isGsm) { // +32 XX XX XX XX

    console.log('FormatZoneNumberOther');

    var authorisedValues    = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Enter', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
        keyValue            = event.key; // string of the key pressed

    if (field.value.length === 3 ||
        field.value.length === 6 ||
        field.value.length === 9 ||
        field.value.length === 12 ||
        field.value.length === 15) {

        field.value += ' ';
    }

    if ((authorisedValues.indexOf(keyValue) === -1) && (keyValue !== '+') && (field.value.length !== 1)) event.preventDefault();

    if (field.value.length > 14) {

        event.preventDefault(); // prevent longer number than needed
        checkZoneCode(field.value.substring(4, 7));

        if (isGsm) {
            alert('You have to insert a GSM number with format: +XX XX XX XX XX (FormatZoneNumberOther)');
            return false;
        }
    }
},

我的客户要求我解决的问题是最终用户想要修改号码的一个或多个部分：01 234 55 67 89 => 01 222 55 67 89。

很明显，用户可以通过单击鼠标或使用箭头键来放置光标，但这会引起一些问题，因为验证是基于字段的长度完成的，字段的长度比字段的长度长。

如何改进此功能以兼顾客户的请求并在全球范围内？

先谢谢您

PS：出于某些原因，必须在ES3或JQuery 2.1.3（最大）中完成此操作，并在IE11上运行...

Edit1：出于相同的原因，我无法使用HTML5输入模式。 Edit2：我尝试实现一个正则表达式验证，因为它看起来很有希望，但是我不知道如何用固定的模式有效地测试变化的字符串（当我输入时）。如果有帮助，当用户提交字段时，我的后端会进行以下测试：

var模式= /（+ \ d {2}）{1}（46 [0-1] | 463 | 46 [5-8] | 47 [0-9] | 480 | 48 [3-9] | 49 [0-9]）{0，}（\ d {2}）{0，}（\ d {2}）{0，}（\ d {2}）{0，} /

Answer 1

因此，我的解决方案需要完善，但我设法完全解决了我的问题：

FormatZoneNumberGSM：函数（字段，事件）{// +32 XX XX XX XX

console.log('FormatZoneNumberGSM');

var pattern = /\d/,
    authorisedKeys      = ['ArrowUp','ArrowRight','ArrowDown','ArrowLeft','Delete','Backspace','Tab','PageDown','PageUp',' '],
    tempFieldValue      = field.value,
    shortTempFieldValue = tempFieldValue.replace(/\s/g, '');

if (((authorisedKeys.indexOf(event.key) === -1) && (pattern.test(event.key) === false)) || (shortTempFieldValue.length > 11)) event.preventDefault();

if ((shortTempFieldValue.length === 11) && !(field.value.length > 16)) field.addEventListener("blur", function(){eventFocusOut(field)});

function eventFocusOut (field) {

    var temp = field.value.replace(/\s/g, '');
    field.value = temp.substring(0, 3) + ' ' + temp.substring(3, 6) + ' ' + temp.substring(6, 8) + ' ' + temp.substring(8, 10) + ' ' + temp.substring(10);
    checkZoneCode(temp.substring(3, 6));
}

}，

格式字段（详尽和ES3）

1 个答案: