表单输入文本模式中的可选字符

Posted

技术标签:

【中文标题】表单输入文本模式中的可选字符【英文标题】:Optional Character in Form Input Text Pattern 【发布时间】:2020-05-30 14:16:29 【问题描述】:

抱歉,如果在其他地方回答了这个问题,请指出我的方向。

使用 Node 和 EJS,我有一个用于捕获啤酒厂名称的表单字段,这是通过 API 提供的...

<label>Brewery</label><br>
<input id="formBreweryName" class="form-control" type="text" name="breweryname" ><br>
<label>Beer Name</label><br>
<input id="formBeerName" class="form-control" type="text" name="beername" >

这是在 &lt;ul&gt; 中显示啤酒厂名称并包含用于填充表单的 onclick 处理程序的 ejs...

 <ul>
    <% BeerList.forEach(function(objsofbeer) %>
       <li>
          <a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
          <span><%= objsofbeer.brewery.brewery_name %></span><br>
          <span><%= objsofbeer.beer.beer_name %></span><br>      
          </a>
       </li>
</ul>

还有用于将啤酒厂名称移植到表单的 javascript...

var addFormText = function( breweryName, beerName) 
    document.getElementById('formBreweryName').value = breweryName;
    document.getElementById('formBeerName').value = beerName;
      

API 向我传递了一个啤酒厂名称,像这样...

brewery_name: 'Reuben\'s Brews',

我在上面的代码中添加了啤酒的名称,以便更好地衡量。

问题

当啤酒厂名称中有撇号时,啤酒厂名称不会显示在相应的表单字段中,但啤酒厂名称会显示在该部分中。

对于大多数示例,啤酒厂名称没有撇号。因此 API 啤酒厂名称按预期显示在表单字段中。但如上例所示,啤酒厂名称带有撇号,因此该名称不会显示在我的表单字段中。

我希望有一个非 JavaScript 的模式属性解决方案可以让我在文本中选择性地包含撇号(或其他无法预见的特殊字符)。如果没有,那么我愿意接受 javascript 或其他建议。

我看到了很多“使用模式来排除某些字符”或“使用模式来强制用户只使用这个给定的文本模式”的例子。但我没有看到任何允许可选包含像撇号这样的字符(或任何其他可选包含特殊字符)。

如果这似乎是我的表单输入字段之外的问题,我很乐意分享更多我的编码。

【问题讨论】:

请展示您如何设置输入。你是在使用 JQuery,还是 Angular 或什么? 感谢 Francesco,我添加了我认为您需要的所有代码,如果您需要更多,请告诉我。 【参考方案1】:

不确定,但我认为问题在于您需要在重音之前使用双转义字符,一个用于服务器上的 ejs,一个用于浏览器上的 js。您可以尝试使用 EJS doesn't escape characters)。 抱歉我没用过ejs...其他尝试,很丑...:

<ul>
<% BeerList.forEach(function(objsofbeer) %>
<%   objsofbeer.brewery.brewery_name = objsofbeer.brewery.brewery_name.replace("'","\\'"); %>
<%   objsofbeer.beer.beer_name = objsofbeer.beer.beer_name.replace("'","\\'"); %>
   <li>
      <a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
      <span><%= objsofbeer.brewery.brewery_name %></span><br>
      <span><%= objsofbeer.beer.beer_name %></span><br>      
      </a>
   </li>

或尝试使用 ` 字符代替 " 或 '

【讨论】:

感谢 Francesco,我一直在外地,所以没有机会尝试这个。我会尽快跟进。谢谢! 嗨,Francesco,我已经尝试了您上面的所有建议(我希望 的输出是什么? 它抛出错误Cannot read property 'replace' of undefined,当我在代码编辑器&lt;a onclick="addFormText( '&lt;%= objsofbeer.beer.brewery_name.replace('\'','\\\'') %&gt;','&lt;%- objsofbeer.beer.beer_name %&gt;' 中查看代码时,它在第一个转义反斜杠和随后的ejs 标记(如%&gt;)下显示红色下划线错误和&lt;%。因此,即使在我运行此代码然后运行它确认错误之前,它也会在编辑器中显示错误。 我编辑了答案...如果这不起作用,请尝试在渲染 ejs 之前对 BeerList 对象执行相同的操作。

以上是关于表单输入文本模式中的可选字符的主要内容,如果未能解决你的问题,请参考以下文章

无法编辑文本输入反应 redux 表单

js 常用正则表达式表单验证代码

VIM命令模式与输入模式切换

SwiftUI 文本字段中的可选链接绑定值

用于文本框验证的 HTML5 正则表达式模式:仅允许字母、空格和某些字符

avro 模式中的可选数组