动态地将模式和标题属性添加到输入控件

Question

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

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

on body onload我正在为这个输入控件添加一个模式和标题属性

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}"这是不正确的。因此，您需要在每个现有\旁边提供另一个转义字符，这将导致加倍\\，因此您生成的是pattern="\d{2}-(?:\d{4}-){3}\d{1}" HTML。因此，JS中的行将如下所示：

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

休息一切都很好。如果有效，请告诉我。