HTML5 pattern正则报错：未使用flag却提示改用u flag而非v flag

问题描述 #

我要实现读取两个整数并在页面和控制台输出它们的和，写了下面的代码：

<body>
    <div>
        <form onsubmit="displaySum(); return false">
        <h1>Sum of two numbers</h1>
        <br>
        <input id="number1" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="Enter number 1">
        <input id="number2" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="Enter number 2">
        <button id="submit-button" type="submit">Add</button>
        <h1 id="displayArea"></h1>
        </form>
    </div>
    <script>
        function displaySum()
        {
            let num1=parseInt( document.getElementById("number1").value );
            let num2=parseInt( document.getElementById("number2").value );
            let sum = num1 + num2;
            console.log("Sum is: "+ sum);
            document.getElementById("displayArea").innerHTML=sum;
        }
    </script>
</body>

功能能正常运行，但控制台会报错：

Pattern attribute value ^[-\d]\d*$ is valid with the RegExp u flag, but not with the v flag: Uncaught SyntaxError: Invalid regular expression: /^[-\d]\d*$/v: Invalid character in character class.

我没给正则加任何标志，为啥会触发这个错误？

问题原因 #

Chrome这类现代浏览器现在处理HTML的pattern属性时，会默认尝试用更严格的v标志（Unicode属性转义的新标准）解析正则。你写的^[-\d]\d*$里，字符类[-\d]中的-夹在中间，在v标志下会被当作范围符号，但-到数字的范围是不合法的，所以直接报错了。

解决方案 #

有三种简单的修复方式，选一种就行：

1. 转义字符类里的- #

给-加转义符，明确告诉浏览器这是普通字符，不是范围符号：

<input id="number1" class="read" type="text" pattern="^[\-\d]\d*$" required placeholder="Enter number 1">
<input id="number2" class="read" type="text" pattern="^[\-\d]\d*$" required placeholder="Enter number 2">

2. 把-移到字符类的开头或结尾 #

当-在字符类的最前面或最后面时，浏览器不会把它当作范围符号，直接调整位置就行：

<input id="number1" class="read" type="text" pattern="^[-\\d]\\d*$" required placeholder="Enter number 1">
<input id="number2" class="read" type="text" pattern="^[-\\d]\\d*$" required placeholder="Enter number 2">

3. 优化正则表达式（推荐） #

原来的正则允许只输入-这种无效值，优化成更严谨的写法，既能避免报错，还能提升输入验证的准确性：

<input id="number1" class="read" type="text" pattern="^[-+]?\d+$" required placeholder="Enter number 1">
<input id="number2" class="read" type="text" pattern="^[-+]?\d+$" required placeholder="Enter number 2">

这个正则允许可选的正负号，后面必须跟至少一个数字，能有效阻止空值、单独符号这类无效输入。

验证效果 #

修改后，浏览器的输入验证正常工作，控制台也不会再弹出那个正则语法错误，求和功能不受影响。

内容的提问来源于stack exchange，提问作者Nafeesath Musfira Badriya