如何在 HTML 的输入字段上添加允许的符号？答案

【问题标题】：How to add allowed symbols on input field in HTML?如何在 HTML 的输入字段上添加允许的符号？
【发布时间】：2021-09-05 10:58:09
【问题描述】：

我有我自己创建的input 标签，必须填写电话号码：

    <base-input
        style="margin-bottom: 15px; width: 100%; max-width: 510px;"
        v-model="phone"
        type="tel"
        placeholder="Mobile phone"
    />

如何只添加允许的符号（0-9 和 +）。我试图使用pattern="[0-9]+"，但它不起作用。另外，据我所知，它可以用正则表达式来完成，但我不知道如何在这里使用它

【问题讨论】：

标签： javascript html css vue.js input

【解决方案1】：

使用正则表达式^[0-9+]+$。它允许数字和+

例如here

【讨论】：

【解决方案2】：

HTML 输入标记有一个接收正则表达式的pattern 属性。

你的情况：

<input
style="margin-bottom: 15px; width: 100%; max-width: 510px;"
v-model="phone"
type="tel"
placeholder="Mobile phone" 
pattern="[0-9\+]+" title="Phone number - allowed symbols are (0-9 and +)" />

如果模式不匹配，则会抛出标题。

【讨论】：