是否可以动态设置表单输入的模式属性以匹配该表单中另一个输入的输入值?

Can the pattern attribute of a form input be set dynamically to match the entered value of another input in that form?

提问人:guitar4jc 提问时间:11/9/2023 最后编辑:guitar4jc 更新时间:11/9/2023 访问量:29

问:

这个问题基本上说明了一切,但为了提供更多的背景信息,我有一个表格,其中包含电子邮件的标准方法之一:输入和输入当然必须相互匹配才能有效。EmailConfirm Email

我想知道我是否可以将输入动态设置为用户在 keyup 或 focusout 或类似内容的第一个输入字段中输入的任何值的正则表达式。这有意义吗,这样的事情是否可行/可能?patternConfirm EmailEmail

我知道如何为 keyup/focusout 编写事件侦听器,我只是不确定如何为这种情况编写正则表达式和/或是否可以像这样动态创建模式属性?

哦,还有,请不要jquery。我正在使用香草javascript。ES6、typescript 等都很好,但 jquery 解决方案不适用于这个项目。

提前致谢!

JavaScript 正则表达式 TypeScript 表单 输入

评论


答:

0赞 Chris Hamilton 11/9/2023 #1

正则表达式可以只是一个常规字符串,非常简单。幸运的是,如果您不允许在电子邮件中使用非法字符,则无需对正则表达式的任何字符进行转义。如果你在电子邮件中允许类似的东西,你需要像这样转义它[\[

const i1 = document.getElementById('1');
const i2 = document.getElementById('2');

i1.addEventListener('change', (ev) => {
  i2.setAttribute('pattern', ev.target.value);
});
<form>
  <input id="1" required pattern="[\w\-\+\.]+@[\w\-\+\.]+" title="Email ex. a@b" />
  <br />
  <br />
  <input id="2" required pattern="" title="Match email above"/>
  <br />
  <br />
  <input type="submit" />
</form>

我那里的电子邮件正则表达式已经足够好了,它只是检查@符号并且没有非法字符。如果您真的在验证电子邮件,您只需发送带有链接的确认。

您可以检查此线程以了解使用正则表达式验证电子邮件的荒谬性:如何使用正则表达式验证电子邮件地址?

评论

0赞 guitar4jc 11/9/2023
明!如此简单干净。我想得太多了!谢谢!