英文:
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
问题
<body>
<div>
<form onsubmit="displaySum(); return false">
<h1>两个数字的和</h1>
<br>
<input id="number1" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="输入第一个数字">
<input id="number2" class="read" type="text" pattern="^[-\d]\d*$" required placeholder="输入第二个数字">
<button id="submit-button" type="submit">相加</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);
document.getElementById("displayArea").innerHTML=sum;
}
</script>
</body>
我得到了这个错误信息：
Pattern属性值^[-\d]\d*$与RegExp u标志一起有效，但与v标志不兼容：Uncaught SyntaxError: Invalid regular expression: /^[-\d]\d*$/v: 字符类中的无效字符。请参阅https://crbug.com/1412729。
我想读取两个整数并在屏幕和控制台上输出它们的和。我尝试匹配模式以读取整数值，我得到了正确的输出。但我被这个错误信息困扰着。
英文:
<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>
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:
一个更简单的正则表达式，用于接受负整数和正整数，如下所示：
<!-- [title] is included in error message -->
<input pattern="-\d+|\d+" title="必须是负整数或正整数">
正则表达式: -\d+|\d+
| 段落 | 描述 |
|---|---|
<pre>-\d+</pre> |
匹配连字符后跟一个或多个数字 |
| ` | \d+
` |
<pre>\d+</pre> |
匹配一个或多个数字 |
示例
额外的奖励是，当用户输入超过5个字符时，有一个“input”事件处理程序，会扩展<input>的宽度。
示例中有详细注释
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// 引用<form>
const F = document.forms.calc;
/*
引用<form>中的所有表单控件
在这种情况下，将包括所有<input>、<button>和<fieldset>
*/
const fc = F.elements;
/*
将<form>注册到“submit”事件--调用sum()
将<form>注册到“input”事件--调用extend()
*/
F.onsubmit = sum;
F.oninput = extend;
// 事件处理程序始终传递事件对象
function sum(event) {
// 阻止<form>将数据发送到服务器
event.preventDefault();
// 获取<input>的值并将其转换为数字。
let n1 = parseInt(fc.number1.value);
let n2 = parseInt(fc.number2.value);
// 在fieldset#result中显示总和
fc.result.textContent = n1 + n2;
}
function extend(event) {
// 引用用户正在输入数据的表单控件。
const inp = event.target;
/*
如果用户正在输入数据的fc具有类“.read”
并且它不是<form>...
...qty是inp当前具有的字符数..
...如果inp中有超过5个字符...
...inp的宽度会增加...
...否则它将是5ch宽
*/
if (inp.matches(".read") && inp != this) {
let qty = inp.value.length;
if (qty > 5) {
inp.style.width = qty + "ch";
} else {
inp.style.width = "5ch";
}
}
}
<!-- language: lang-css -->
:root {
font: 2ch/1 Consolas
}
input,
button {
display: inline-block;
font: inherit;
}
input {
text-align: right;
width: 5ch;
}
#ui {
position: relative;
display: flex;
align-items: center;
}
#ui>* {
margin: 0 5px;
}
#result {
display: inline-block;
padding: 0;
border: 0;
}
button {
position: absolute;
right: 3px;
cursor: pointer;
}
<!-- language: lang-html -->
<form id="calc">
<fieldset id="ui">
<legend>两个整数的总和</legend>
<!--
[pattern]如下:
匹配连字符: "-" 后跟一个或多个数字
或
匹配一个或多个数字。
如果数据在“submit”事件期间不匹配[pattern]，则将包括[title]中的文本在错误消息中。
-->
<input id="number1" class="read" type="text" pattern="-\d+|\d+" title="必须是负整数或正整数" required> +
<input id="number2" class="read" type="text" pattern="-\d+|\d+" title="必须是负整数或正整数" required> =
<fieldset id="result"></fieldset>
<button>添加</button>
</fieldset>
</form>
<!-- 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:
<!-- [title] is included in error message -->
<input pattern="-\d+|\d+" title="Must be a negative or positive integer">
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 <input> 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 -->
// Reference <form>
const F = document.forms.calc;
/*
Reference all form controls in <form>
In this case it would be all <input>, <button>, and <fieldset>
*/
const fc = F.elements;
/*
Register the <form> to the "submit" event -- call sum()
Register the <form> to the "input" event -- call extend()
*/
F.onsubmit = sum;
F.oninput = extend;
// Event handlers always pass the Event Object
function sum(event) {
// Stop <form> from sending data to server
event.preventDefault();
// Get the values of both <input> and convert them into numbers.
let n1 = parseInt(fc.number1.value);
let n2 = parseInt(fc.number2.value);
// Display the sum in fieldset#result
fc.result.textContent = n1 + n2;
}
function extend(event) {
// Reference the form control that the user is entering data into.
const inp = event.target;
/*
If the fc that the user is entering data into has class ".read"
AND it is NOT <form>...
...qty is the current number of characters the inp has..
...If inp has more than 5 chars in it...
...the inp width is increased...
...otherwise it will be 5ch wide
*/
if (inp.matches(".read") && inp != this) {
let qty = inp.value.length;
if (qty > 5) {
inp.style.width = qty + "ch";
} else {
inp.style.width = "5ch";
}
}
}
<!-- language: lang-css -->
:root {
font: 2ch/1 Consolas
}
input,
button {
display: inline-block;
font: inherit;
}
input {
text-align: right;
width: 5ch;
}
#ui {
position: relative;
display: flex;
align-items: center;
}
#ui>* {
margin: 0 5px;
}
#result {
display: inline-block;
padding: 0;
border: 0;
}
button {
position: absolute;
right: 3px;
cursor: pointer;
}
<!-- language: lang-html -->
<form id="calc">
<fieldset id="ui">
<legend>Sum of Two Integers</legend>
<!--
[pattern] is as follows:
match a hyphen: "-" followed by one or more digits
OR
match one or more digits.
If the data doesn't match the [pattern] during the
"submit" event, the text in [title] will be included
with the error message.
-->
<input id="number1" class="read" type="text" pattern="-\d+|\d+" title="Must be a negative or positive integer" required> +
<input id="number2" class="read" type="text" pattern="-\d+|\d+" title="Must be a negative or positive integer" required> =
<fieldset id="result"></fieldset>
<button>Add</button>
</fieldset>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论