带有符号,字符和数字限制的文本框

时间:2013-06-18 18:15:29

标签: javascript jquery validation

我在限制文本框值方面遇到了困难。

文本框不应允许 "?*," 以外的符号。

例如:A123?*,B456?*,C789?*,D126?*,E?*666

逗号之前和之后(,)仅允许 10 Characters/Symbols/Numbers

在文本框中只允许 54 characters ,包括逗号。

TEXTBOX中只允许 4 comma's

可能的文字框输入: ABC?12345*,A?BC*12345,A???1234**,?*C?12345*,ABC?123***

符号和字符也是可替换的,无论是在开始时 - 符号可能来自或字符或数字。

请检查图像以获得更多说明。 enter image description here

我尝试使用其他符号和允许的逗号限制,但我在限制10个字符并允许符号和字符数时遇到困难。

//<![CDATA[ 
window.onload = function() {
    /*var f = document.getElementById('textbox_restrict');
     f.addEventListener('keyup', function(evt){
     alert("Vinayagam");
     var regex = /[^a-zA-Z0-9]/;
     if(regex.test(this.value)) {
     this.value = this.value.replace(regex, '')  
     }
     });*/
    $('#textbox_restrict').keypress(function(e) {
        $('#backgroundPopup').animate({'opacity': 0.0, 'display': 'none'});
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?\{0,12}]/g, '').toUpperCase();
    });

}//]]>  

$(function() {
    $('body').on('keyup', 'input[id^="textbox_restrict"]', function() {
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?]/g, '').toUpperCase();
    });

    $('#search').live('click', function() {
    }); // End of save click function
}); // End of function 

I also took reference to this Question but the senario is different: How restrict textbox in C# to only receive numbers and (dot "." or comma ","), after "." or "," only allow 2 number characters

Regex Replace anything but numbers and lowercase

jQuery keyup() illegal characters

请告诉我!我实施它有点困惑。

2 个答案:

答案 0 :(得分:1)

这个 RegExp

怎么样?
/^(?:[a-z\d?*]{1,10}(?:,|$)){1,5}$/i

从字符串的开头,允许字符a-z,数字?*,在110之间,逗号或字符串的结尾。至少重复一次,最多5次。然后字符串必须结束。 i标记使a-z包含A-Z

'A123?*,B456?*,C789?*,D126?*,E?*666'.match(/^(?:[a-z\d?*]{1,10}(?:,|$)){1,5}$/i);
// ["A123?*,B456?*,C789?*,D126?*,E?*666"]

请注意,这不会阻止*??x**x?,也不会阻止字符串末尾的逗号。

答案 1 :(得分:1)

也许最好不要一次性完成所有事情。我把任务分成几部分来简化每个阶段。只需将下面的代码段作为keyuponinput事件处理程序添加到您的input

keyUp = function () {
    var n, parts, temp,
        text = this.value,
        caretPos = this.selectionEnd; // Stores the caret position
    parts = text.split(','); // Creates an array of comma separated values
    while (parts.length > 5) { // Limits the array length to 5 i.e only 4 commas allowed
        parts.pop();
    }
    for (n = 0; n < parts.length; n++) { // Iterates through each comma separated string
        parts[n] = parts[n].substring(0, 10); // Limits the string length to 10
        temp = parts[n].match(/[0-9a-zA-Z\*\?]/g); // Creates an array of acceptable characters in the string
        if (temp) {
            parts[n] = temp.join(''); // Adds the accepted value to the original
        } else { // If not value, add empty to the original
            parts[n] = '';
        }
    }
    this.value = parts.join(',').toUpperCase(); // Creates a new acceptable value to the input
    this.setSelectionRange(caretPos, caretPos); // Returns the caret to the original position
    return;
}

jsFiddle的现场演示。

修改

删除字符串supress为54,以避免在字符串中间添加字符时意外删除字符串末尾的字符。添加了else,如果找不到可接受的值,则会添加一个空字符串。使用此代码看起来oninput也是更好的事件。

编辑II

在编辑中间的字符串后添加了一个插入位置,返回原始位置。用鼠标粘贴文本时不完美,但似乎可以在键盘上输入。 (小提琴链接已更新。)