想要防止用户输入任何空间在文本字段提供错误时，他这样做

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

本文关键字：字段 错误 这样做 文本 用户 输入 空间 任何      更新时间：2023-09-26

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

  • Digits 0 - 9
  • Alphabets a-z or A-Z
  • _(下划线)和-(连字符)等字符

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

关于如何防止用户输入除上述字符之外的任何内容并显示错误消息的建议

使用maskRe属性:

将用于过滤的输入掩码正则表达式不匹配的击键(正在键入的字符)。注意:确实如此

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

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

就像这样。keypress和keydown在不同的浏览器上有很多问题，但我相信这应该在大多数/所有现代浏览器上都能正常工作。

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>

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

例如:

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?");

相关文章：