验证文本输入的模式与 maxlength 属性不冲突

Question

我正在创建一个动态表单，用户可以在其中定义输入及其属性。可用的两个选项是添加正则表达式模式和 maxlength 属性，表单的最终用户必须遵守这些属性才能提交。

如果用户定义这样的输入

<input type="text" required maxlength="3">

验证添加正则表达式（如

pattern=".{5,10}"

）是否会使有效输入变得不可能的最佳方法是什么？

此检查将用于确保用户不允许生成包含此类不可能输入的表单，因此任何替代解决方案也将受到赞赏。

我知道可能有某种正则表达式可以检查模式？模式和最大长度的实际值是通过 vue 变量确定的，因此使用 javascript 来解决这个问题是一种选择。

Answer 1

您可以通过此功能查看花样：

<script type="text/javascript">
function isPatternCompatibleWithMaxLength(pattern, maxLength) {
    const lengthPattern = /.*\{(\d+)(,(\d*))?\}.*/;
    const match = pattern.match(lengthPattern);

    if (match) {
        const minLen = parseInt(match[1], 10);
        const maxLen = match[3] ? parseInt(match[3], 10) : undefined;

        if (minLen > maxLength) {
            return false;
        }

        if (maxLen && maxLen < maxLength) {
            return false;
        }
    }

    return true;
}

//Call the function
const pattern = ".{5,10}";
const maxLength = 3;
const isValid = isPatternCompatibleWithMaxLength(pattern, maxLength);

console.log(isValid);

</script>