想要通过提供错误来防止用户在文本字段中输入任何 space

Question

我在 Extjs 中有一个文本字段。此文本字段只能包含

Digits 0 - 9
Alphabets a-z or A-Z
像 _（下划线）和 -（连字符）这样的字符

我想阻止用户输入这些字符以外的任何内容。因此，我希望显示一个错误，比如红色下划线和 helptext 来通知用户为什么会出现错误。

请教如何防止用户输入除上述字符以外的任何内容并显示错误消息。

Answer 1

使用maskRe 属性:

An input mask regular expression that will be used to filter keystrokes (character being typed) that do not match. Note: It does not filter characters already in the input.

maskRe: /[A-Za-z0-9\-_]/

工作示例：https://fiddle.sencha.com/#fiddle/o4b

Answer 2

您可以添加一个事件keyup并检查输入的键值。

例如 space:

listeners: {
        keyup: function(field, e) {
             var key = e.getKey(); 
             if (key == 32){
                 alert("Hey dude, what are you doing?");
             }
       }
 }

或者别的什么。你可以看看：

field.addClass("x-form-invalid")
field.markInvalid("Hey dude, what are you doing?");

希望对您有所帮助。

Answer 3

像这样。 keypress and keydown 在不同的浏览器上存在很多问题，但我相信这应该可以在 most/all 现代浏览器上正常工作。

var errorDiv = document.getElementById('error'),
    testInp = document.getElementById('test');

testInp.addEventListener('keypress', function (evt) {
    var code = evt.keyCode || evt.charCode;

    if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 45 || code === 95) {

        errorDiv.classList.add('hidden');
    } else {
        evt.preventDefault();
        errorDiv.classList.remove('hidden');
    }
}, false);

testInp.addEventListener('keydown', function (evt) {
    var code = evt.keyCode || evt.charCode;

    if (code === 8 || code >= 37 && code <= 40|| code === 46) {
        errorDiv.classList.add('hidden');
    }
}, false);

#error {
    color: red;
}
.hidden {
    visibility: hidden;
}

<input id="test" type="text" />
<div id="error" class="hidden">As such I wish to display an error, something like a red underline along with helptext to notify the user as to why the error is there.</div>

想要通过提供错误来防止用户在文本字段中输入任何 space

Want to prevent user from entering any space in textfield by providing error when he does

javascript

regex

extjs

qtip