有没有一种方法可以使用 JavaScript 将验证从一个输入复制到另一个输入？

Question

我有一个客户要我用逗号和美元符号标点所有货币输入。这意味着我必须使用文本输入而不是数字输入，这意味着我无法利用数字输入具有的内置验证，主要是最小值、最大值、步长，以及简单地验证用户输入的内容实际上是什么一个数字字符串。因此，我的想法是创建实际数字输入的文本输入副本，隐藏实际数字输入，在用户键入时格式化文本输入的内容，并将它们复制到隐藏的数字输入中，以便验证和提交从那里。 javascript 显示任何可能从隐藏数字输入中弹出的验证错误的最佳方法是什么？我专门查看约束验证 api:

https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

示例如下 html:

<!-- hidden actual input field -->
<input id="real" name="cost" type="number" min="0" max="1000" step=".01" style="display:none;" />

<!-- visible, fake, punctuated input field -->
<input id="punctuated" type="text" />

所以我想找到一种方法来获取 DOM 中的任何验证对象作为第一个输入并将它们复制到第二个输入。到目前为止我已经试过了（见下文），但似乎 validity 和 validationMessage DOM 属性是只读的：

var punctuated = document.getElementById('punctuated');
var real = document.getElementById('real');
punctuated.validationMessage = real.validationMessage;
punctuated.validity = real.validity;

Answer 1

第一个选项：将相同的 class 添加到两个输入并使用 document.getElementsByClassName('some-class')

第二个选项：要使用单个输入并在 (keyup) 上调用验证函数，该函数将检查用户输入是否与您需要的正则表达式匹配

Answer 2

这似乎是答案：

punctuated.setCustomValidity(real.validationMessage);

我只是将它绑定到页面加载，以及标点输入的点击和键盘事件，它似乎工作正常。因此，当用户在标点输入中键入东西时，它会被复制到实际输入并使用 html 属性进行验证，然后单击和键入事件将验证消息传递给标点输入。

有没有一种方法可以使用 JavaScript 将验证从一个输入复制到另一个输入？

Is there a way to copy validation from one input to another with JavaScript?

javascript

forms

validation

constraint-validation