javascript - 为输入控件动态添加 pattern 和 title 属性

Question

我有一个 HTML 输入控件，如下所示:

<input type="text" value="<%= this.CustomerAcctNumber %>" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" required >

在 body onload 上，我正在向这个输入控件添加一个 pattern 和 title 属性

var CustomerAcctNumber = document.getElementById("CustomerAcctNumber");
CustomerAcctNumber.setAttribute("pattern","\d{2}-(?:\d{4}-){3}\d{1}");
CustomerAcctNumber.setAttribute("title","xx-xxxx-xxxx-xxxx-x");

当我提交这个带有有效模式的网页时，它给我错误:

输入控件按预期呈现如下:

<input type="text" value="" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" pattern="d{2}-(?:d{4}-){3}d{1}" title="xx-xxxx-xxxx-xxxx-x" required="">

任何建议或意见将不胜感激!!

Answer 1

我发现了问题。您正在从 JavaScript 传递模式值，因此它会转义所有需要在 HTML 中生成的 \ 符号。目前您的 HTML 生成的 pattern="d{2}-(?:d{4}-){3}d{1}" 是不正确的。所以你需要在每个现有的 \ 旁边提供另一个转义字符，这将导致 \\ 加倍，所以你是 HTML 生成 pattern="\d {2}-(?:\d{4}-){3}\d{1}"。所以你的 JS 中的行将变成如下所示:

CustomerAcctNumber.setAttribute("pattern","\\d{2}-(?:\\d{4}-){3}\\d{1}"); //renders to '\d{2}-(?:\d{4}-){3}\d{1}' in HTML

其他一切都很好。让我知道这是否有效。