Javascript regExp 输入验证

Question

这是我的第一篇文章，我认为答案很简单，但我不明白:

我(尝试)建立一个 Shopify 商店，但我必须进行一些修改，这就是我陷入困境的地方:

在我的产品页面上，我想添加 <input type=text>为必填项，只能是大写字母，且长度必须最小。为 1 且最大值10.我用html5模式尝试过，但没有成功。我读到一些内容，如果 shopify 主题包含 ajax，它只会忽略模式和必需的属性(我不知道这是否属实)。

所以我尝试制作自己的函数:

$('#dein-text').on("change textInput input", function(evt) {
    $(this).val(function (_, val) {
        return val.toUpperCase();
    });
});

这应该将字符串返回为大写字母。

function checkText() {
    var re = /(?=.*[A-Z]).{1,6}/;
    if(re.test($('#dein-text').val())) {
        $('#problem-bei-input').hide();
        $('.add', $product).removeClass('disabled').removeAttr('disabled');
    } else {       
        $('#problem-bei-input').show();
        $('.add', $product).addClass('disabled').attr('disabled', 'disabled');
    }
}

每次输入表单发生更改时都会执行此函数: $('#dein-text').on("change textInput input", checkText);

这不起作用，因为如果有最小值，它会删除禁用的类。 1 个字母(它不会检查是否超过 6 个)以及是否有一个大写字母(例如“HA11”不会添加 (.disabled) 类)。

我希望我能描述我的问题是什么。

感谢您的帮助!

编辑:这是整个表单的.liquid代码:

https://codepen.io/shawdyy/pen/PmOPWy

(我希望你能在 codepen 上看到这个，抱歉，我对 webdev 真的很陌生)

Answer 1

你可以尝试:

$('#my_id').on("change input", function(evt) {
    $(this).val(function (_, val) {
        return val.toUpperCase().replace(/[^A-Z]/, "").replace(/^([A-Z]{1,10}).*$/g, "$1");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_id">