0

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

这是代码：

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,}/

4

1 回答 1

0

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

FormatZoneNumberGSM: function (field, event) { // +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));
}

},

于 2018-09-13T15:48:33.067 回答