Verify a text input's pattern does not conflict with the maxlength attribute

I am creating a dynamic form in which the user can define the inputs and its attributes. Two options available are to add a regex pattern and a maxlength attribute that the end user of the form must comply with to submit.

If the user defines an input like this

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

What is the best way of verifying whether adding regex like pattern=".{5,10}" will make a valid input impossible?

This check will be used to ensure the user is not allowed to produce a form with these kinds of impossible inputs so any alternative solutions would also be appreciated.

I understand there may be some kind of regex I can check the pattern against? The actual values of the pattern and maxlength are determined through vue variables so using javascript to solve this problem is an option.

You can check the pattern by this JS function:

<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;
//Call this function to check
const isValid = isPatternCompatibleWithMaxLength(pattern, maxLength);

console.log(isValid);

</script>