如何使用jQuery Inputmask设置表单输入最小长度保留原生校验提示

核心需求 #

• 基于RobinHerbots的input mask插件实现UUID格式输入掩码，基础功能运行正常
• 点击提交按钮时，若输入字符数未达要求长度，需保留HTML原生表单校验提示
• 不启用clearIncomplete: true配置，避免清空用户已输入的不完整内容
• 提交按钮绑定自定义事件，通过fetch方法向服务端发送请求

现有实现代码 #

插件初始化逻辑 #

$(document).ready(function(){
    $('.id').inputmask({
        mask: "*{8}-*{4}-*{4}-*{4}-*{12}",
        definitions: {'*': {validator: "[0-9a-f]"}},
        casing: "lower",
        removeMaskOnSubmit: true,
        // clearIncomplete: true
    });
});

表单HTML结构 #

<form action="" id="form">
    <p><input type="text" name="id" id="id" class="id" size="50" required /> * 32位字符</p>
    <input type="reset" value="reset" onclick="resetForm()">
    <input type="submit" value="divert" />
</form>

最终落地方案 #

未找到Inputmask插件对应该需求的原生实现方式，最终更换为更轻量简单的jQuery Mask Plugin插件，同时直接在input标签上配置minlength/maxlength属性，依托原生表单能力完成长度校验，触发默认提示。

内容的提问来源于stack exchange，提问作者anon