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

这不起作用，因为如果有min，它会删除禁用的类。 1个字母（不检查是否有超过6个）以及是否有一个大写字母（类似“HA11”的东西不添加（.disabled）类）。

我希望我可以描述我的问题。

感谢您的帮助！

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

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

（我希望你能在codepen上看到这个，sry我真的对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">

Answer 2

要在输入字段中仅允许一到十个大写ASCII字母，请使用以下HTML5模式：

<input type="text" pattern="[A-Z]{1,10}" title="Only 1 to 10 uppercase ASCII letters allowed!">

如果你需要匹配普通JS中只包含1到10个大写ASCII字母的字符串，你需要

 var re = /^[A-Z]{1,10}$/;

请注意，在^属性中使用正则表达式时，HTML5会自动添加开始和结束锚点$ / pattern。

Javascript regExp输入验证

2 个答案: