使用正则表达式的 html 输入字段摆脱文件名的无效字符

Question

我的表单中有一个输入字段，用户可以在其中输入稍后将在 Windows 系统上用作文件夹名称的内容。现在我想防止人们使用任何对文件夹名称无效的字符，即 \/:"*?<>| .我找到了 pattern -html input field 的属性我可以在哪里使用正则表达式。现在我无法获得正确的正则表达式并在我的 html 代码中正确转义它:

<div class="form-group">
    <label class="col-md-3 control-label" for="folder_name">Folder-Name:</label>
    <div class="col-md-9">
        <input type="text" class="form-control" id="folder_name" name="folder_name" pattern="[^\\/:\"\*\?<>|]+" required>
    </div>                    
</div>

我做错了什么？

Answer 1

您需要使用 \x22 而不是双引号:

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<div class="form-group">
    <label class="col-md-3 control-label" for="folder_name">Folder-Name:</label>
    <div class="col-md-9">
        <input type="text" class="form-control" id="folder_name" name="folder_name" pattern="[^\\/:\x22*?<>|]+" required>
    </div>                    
</div>