Javascript 具有符号、字符和数字限制的文本框

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

文本框不允许使用除“？*”、“以外的符号

例如：

A123*、B456*、C789*、D126*、E*666

逗号

（，）

前后只允许

10个字符/符号/数字

包括逗号在内的文本框中只允许有54个字符

文本框中只允许使用4个逗号

可能的文本框输入：
ABC？12345*、A？BC*12345、A？1234**、*C？12345*、ABC？123***

此外，符号和字符是可替换的，无论是在开始时-符号可能出现或字符或数字

请查看图片以了解更多信息。

我尝试使用其他符号进行限制，并允许使用逗号，但我在限制使用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 

//
$（函数（）{
$（'body'）。在（'keyup'，'input[id^=“textbox\u restrict”]”上，函数（）{
this.value=this.value.replace（/[^0-9a-zA-Z\*\？]/g'，）.toUpperCase（）；
});
$（“#搜索”）.live（'click'，function（）{
})；//保存单击函数结束
}); // 功能结束





请给我忠告！我在实现它时有点困惑。
这个RegExp怎么样

从字符串开始，允许字符
a-z
、数字
？
和
*
在
1
和
10
之间，然后是逗号或字符串结尾。重复此操作至少一次，最多
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？
，也不会阻止字符串末尾的逗号。
也许最好不要尝试一次完成所有工作。我把任务分成几部分来简化每个阶段。只需将下面的代码片段作为
keyup
或
oninput
eventhandler添加到
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;
}

keyUp=函数（）{
变量n、零件、温度、，
text=this.value，
caretPos=this.selectionEnd；//存储插入符号位置
parts=text.split（“，”）；//创建逗号分隔值的数组
而（parts.length>5）{//将数组长度限制为5，即只允许4个逗号
parts.pop（）；
}
对于（n=0；n

现场演示

编辑

将字符串压缩为54，以避免在字符串中间添加字符时在字符串末尾意外删除字符。添加了
else
，如果找不到可接受的值，将添加一个空字符串。同样，使用此代码，
oninput
将是一个更好的事件

编辑II

在插入中间的字符串后，插入一个插入位置返回原来的位置。在用鼠标粘贴文本时并不完美，但在键盘输入时似乎很有效。（小提琴链接已更新。）
正如您所说的“需要注意的是，这不会阻止？、？x或*x？”，那么我想添加另一个功能来检查符号吗？而且符号和字符是可替换的，无论是在开始时-符号可能出现，还是字符或数字。因为我目前不关心字符顺序，这就是我的便条。困难在于你的
10个字符/符号/数字是允许的
，因为
？*
是两个字符。哦，在你的OP中你总是把
？*
放在一起，所以我认为它们必须组合在一起，但是，如果您的注释中的示例有效，则该示例已匹配，因此无需再做任何更改。如果要防止字符串末尾出现逗号，请将
（？：，|$）
更改为
（？：，（？！$）|$）
。这使用了一个前瞻来确保如果有逗号，下一件事就不是
$
（即行尾）您需要这样的东西吗？@Teemu了解工作代码会很有帮助。提前谢谢。嗯。。。我不太明白你的评论，你想让我把这个片段作为答案吗？虽然你已经接受了一个答案。我可能会接受保罗的答案，但如果你的答案能帮助我更好地理解它，我也会接受你的答案。因为我在互联网上搜索了这个答案，但我在这里找到了，所以有些人可能需要你的工作答案来解决这个问题。@Teemu…在标记问题时请注意。标签是针对特定插件的，这不是您问题的一部分。编辑。谢谢。嗯，我不能重现那个问题（Firefox）。无论如何，似乎还有一些其他问题，请检查，它修复了一些问题，可能是左箭头也。好吧，我一直在等待这个。。。这是实时验证的诅咒。它可以通过一些
选择
和
范围
对象来解决，尽管跨浏览器的代码比这个原始代码片段大好几倍。在FF中，通过同时按SHIFT键和另一个键，插入符号保持在正确的位置，尽管
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;
}