I get an error related to HTML 5 pattern. It suggests me to use 'u' flag instead of 'v' flag while I haven't used any flag in my pattern

huangapple
go评论107阅读模式
英文:

I get an error related to HTML 5 pattern. It suggests me to use 'u' flag instead of 'v' flag while I haven't used any flag in my pattern

问题

  1. <body>
  2.     <div>
  3.         <form onsubmit="displaySum(); return false">
  4.             <h1>两个数字的和</h1>
  5.             <br>
  6.             <input id="number1" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="输入第一个数字">
  7.             <input id="number2" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="输入第二个数字">
  8.             <button id="submit-button" type="submit">相加</button>
  9.             <h1 id="displayArea"></h1>
  10.         </form>
  11.     </div>
  12.     <script>
  13.         function displaySum()
  14.         {
  15.            
  16.             let num1=parseInt(document.getElementById("number1").value);
  17.             let num2=parseInt(document.getElementById("number2").value);
  18.             let sum = num1 + num2;
  19.             console.log("和是：" + sum);
  20.             document.getElementById("displayArea").innerHTML=sum;
  21.         }
  22.     </script>
  23. </body>

My output

我得到了这个错误信息：

Pattern属性值^[-\d]\d*$与RegExp u标志一起有效，但与v标志不兼容：Uncaught SyntaxError: Invalid regular expression: /^[-\d]\d*$/v: 字符类中的无效字符。请参阅https://crbug.com/1412729。

我想读取两个整数并在屏幕和控制台上输出它们的和。我尝试匹配模式以读取整数值，我得到了正确的输出。但我被这个错误信息困扰着。

英文:

My code

  1. &lt;body&gt;
  2.     &lt;div&gt;
  3.         &lt;form onsubmit=&quot;displaySum(); return false&quot;&gt;
  4.         &lt;h1&gt;Sum of two numbers&lt;/h1&gt;
  5.         &lt;br&gt;
  6.         &lt;input id=&quot;number1&quot; class=&quot;read&quot; type=&quot;text&quot; pattern=&quot;^[-\d]\d*$&quot; required placeholder=&quot;Enter number 1&quot;&gt;
  7.         &lt;input id=&quot;number2&quot; class=&quot;read&quot; type=&quot;text&quot; pattern=&quot;^[-\d]\d*$&quot; required placeholder=&quot;Enter number 2&quot;&gt;
  8.         &lt;button id=&quot;submit-button&quot; type=&quot;submit&quot;&gt;Add&lt;/button&gt;
  9.         &lt;h1 id=&quot;displayArea&quot;&gt;&lt;/h1&gt;
  10.         &lt;/form&gt;
  11.     &lt;/div&gt;
  12.     &lt;script&gt;
  13.         function displaySum()
  14.         {
  15.            
  16.             let num1=parseInt( document.getElementById(&quot;number1&quot;).value );
  17.             let num2=parseInt( document.getElementById(&quot;number2&quot;).value );
  18.             let sum = num1 + num2;
  19.             console.log(&quot;Sum is: &quot;+ sum);
  20.             document.getElementById(&quot;displayArea&quot;).innerHTML=sum;
  21.         }
  22.     &lt;/script&gt;
  23. &lt;/body&gt;

My output

I got this error message:

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. See https://crbug.com/1412729

I wanted to read two integers and output its sum on the screen and console. I tried matching pattern to read integer values and I got the output right. But I'm stuck with the error message.

答案1

得分: 0

Here is the translation of the provided content:

一个更简单的正则表达式，用于接受负整数和正整数，如下所示：

  1. <!-- [title] is included in error message -->
  2. <input pattern="-\d+|\d+" title="必须是负整数或正整数">

正则表达式: -\d+|\d+

段落 描述
<pre>-\d+</pre> 匹配连字符后跟一个或多个数字
`

  1.  
 \d+

`
<pre>\d+</pre> 匹配一个或多个数字

示例

额外的奖励是，当用户输入超过5个字符时，有一个“input”事件处理程序，会扩展<input>的宽度。

示例中有详细注释

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. // 引用<form>
  5. const F = document.forms.calc;
  6. /*
  7. 引用<form>中的所有表单控件
  8. 在这种情况下，将包括所有<input>、<button>和<fieldset>
  9. */
  10. const fc = F.elements;
  12. /*
  13. 将<form>注册到“submit”事件--调用sum()
  14. 将<form>注册到“input”事件--调用extend()
  15. */
  16. F.onsubmit = sum;
  17. F.oninput = extend;
  19. // 事件处理程序始终传递事件对象
  20. function sum(event) {
  21.   // 阻止<form>将数据发送到服务器
  22.   event.preventDefault();
  23.   // 获取<input>的值并将其转换为数字。
  24.   let n1 = parseInt(fc.number1.value);
  25.   let n2 = parseInt(fc.number2.value);
  26.   // 在fieldset#result中显示总和
  27.   fc.result.textContent = n1 + n2;
  28. }
  30. function extend(event) {
  31.   // 引用用户正在输入数据的表单控件。
  32.   const inp = event.target;
  33.   /*
  34.   如果用户正在输入数据的fc具有类“.read”
  35.   并且它不是<form>...
  36.   ...qty是inp当前具有的字符数..
  37.   ...如果inp中有超过5个字符...
  38.   ...inp的宽度会增加...
  39.   ...否则它将是5ch宽
  40.   */
  41.   if (inp.matches(".read") && inp != this) {
  42.     let qty = inp.value.length;
  43.     if (qty > 5) {
  44.       inp.style.width = qty + "ch";
  45.     } else {
  46.       inp.style.width = "5ch";
  47.     }
  48.   }
  49. }
  51. <!-- language: lang-css -->
  52. :root {
  53.   font: 2ch/1 Consolas
  54. }
  56. input,
  57. button {
  58.   display: inline-block;
  59.   font: inherit;
  60. }
  62. input {
  63.   text-align: right;
  64.   width: 5ch;
  65. }
  67. #ui {
  68.   position: relative;
  69.   display: flex;
  70.   align-items: center;
  71. }
  73. #ui>* {
  74.   margin: 0 5px;
  75. }
  77. #result {
  78.   display: inline-block;
  79.   padding: 0;
  80.   border: 0;
  81. }
  83. button {
  84.   position: absolute;
  85.   right: 3px;
  86.   cursor: pointer;
  87. }
  89. <!-- language: lang-html -->
  90. <form id="calc">
  91.   <fieldset id="ui">
  92.     <legend>两个整数的总和</legend>
  93.     <!--
  94.       [pattern]如下:
  95.       匹配连字符: "-" 后跟一个或多个数字
  96.       或
  97.       匹配一个或多个数字。
  98.       如果数据在“submit”事件期间不匹配[pattern]，则将包括[title]中的文本在错误消息中。
  99.     -->
  100.     <input id="number1" class="read" type="text" pattern="-\d+|\d+" title="必须是负整数或正整数" required> +
  101.     <input id="number2" class="read" type="text" pattern="-\d+|\d+" title="必须是负整数或正整数" required> =
  102.     <fieldset id="result"></fieldset>
  103.     <button>添加</button>
  104.   </fieldset>
  105. </form>
  107. <!-- end snippet -->

I've provided the translated content, removing the code parts as you requested.

英文:

A simpler RegExp for [pattern] that accepts negative and positive integers is as follows:

  1. &lt;!-- [title] is included in error message --&gt;
  2. &lt;input pattern=&quot;-\d+|\d+&quot; title=&quot;Must be a negative or positive integer&quot;&gt;

RegeExp: -\d+|\d+

Segment Description
<pre>-\d+</pre> match hyphen followed by one or more digits
<pre>|</pre> OR
<pre>\d+</pre> match one or more digits

Example

As an added bonus there's an "input" event handler that expands the width of an &lt;input&gt; when there are more than 5 characters entered by the user.

Details are commented in example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. // Reference &lt;form&gt;
  2. const F = document.forms.calc;
  3. /*
  4. Reference all form controls in &lt;form&gt;
  5. In this case it would be all &lt;input&gt;, &lt;button&gt;, and &lt;fieldset&gt;
  6. */
  7. const fc = F.elements;
  8. /*
  9. Register the &lt;form&gt; to the &quot;submit&quot; event -- call sum()
  10. Register the &lt;form&gt; to the &quot;input&quot; event -- call extend()
  11. */
  12. F.onsubmit = sum;
  13. F.oninput = extend;
  14. // Event handlers always pass the Event Object
  15. function sum(event) {
  16. // Stop &lt;form&gt; from sending data to server
  17. event.preventDefault();
  18. // Get the values of both &lt;input&gt; and convert them into numbers.
  19. let n1 = parseInt(fc.number1.value);
  20. let n2 = parseInt(fc.number2.value);
  21. // Display the sum in fieldset#result
  22. fc.result.textContent = n1 + n2;
  23. }
  24. function extend(event) {
  25. // Reference the form control that the user is entering data into.
  26. const inp = event.target;
  27. /*
  28. If the fc that the user is entering data into has class &quot;.read&quot; 
  29. AND it is NOT &lt;form&gt;...
  30. ...qty is the current number of characters the inp has..
  31. ...If inp has more than 5 chars in it...
  32. ...the inp width is increased...
  33. ...otherwise it will be 5ch wide
  34. */
  35. if (inp.matches(&quot;.read&quot;) &amp;&amp; inp != this) {
  36. let qty = inp.value.length;
  37. if (qty &gt; 5) {
  38. inp.style.width = qty + &quot;ch&quot;;
  39. } else {
  40. inp.style.width = &quot;5ch&quot;;
  41. }
  42. }
  43. }

<!-- language: lang-css -->

  1. :root {
  2. font: 2ch/1 Consolas
  3. }
  4. input,
  5. button {
  6. display: inline-block;
  7. font: inherit;
  8. }
  9. input {
  10. text-align: right;
  11. width: 5ch;
  12. }
  13. #ui {
  14. position: relative;
  15. display: flex;
  16. align-items: center;
  17. }
  18. #ui&gt;* {
  19. margin: 0 5px;
  20. }
  21. #result {
  22. display: inline-block;
  23. padding: 0;
  24. border: 0;
  25. }
  26. button {
  27. position: absolute;
  28. right: 3px;
  29. cursor: pointer;
  30. }

<!-- language: lang-html -->

  1. &lt;form id=&quot;calc&quot;&gt;
  2. &lt;fieldset id=&quot;ui&quot;&gt;
  3. &lt;legend&gt;Sum of Two Integers&lt;/legend&gt;
  4. &lt;!--
  5. [pattern] is as follows:
  6. match a hyphen: &quot;-&quot; followed by one or more digits 
  7. OR
  8. match one or more digits.
  9. If the data doesn&#39;t match the [pattern] during the
  10. &quot;submit&quot; event, the text in [title] will be included
  11. with the error message.
  12. --&gt;
  13. &lt;input id=&quot;number1&quot; class=&quot;read&quot; type=&quot;text&quot; pattern=&quot;-\d+|\d+&quot; title=&quot;Must be a negative or positive integer&quot; required&gt; +
  14. &lt;input id=&quot;number2&quot; class=&quot;read&quot; type=&quot;text&quot; pattern=&quot;-\d+|\d+&quot; title=&quot;Must be a negative or positive integer&quot; required&gt; =
  15. &lt;fieldset id=&quot;result&quot;&gt;&lt;/fieldset&gt;
  16. &lt;button&gt;Add&lt;/button&gt;
  17. &lt;/fieldset&gt;
  18. &lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 16:33:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246559.html
  • html
  • regex
  • validation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定