字段中只有按字母顺序排列的文本

Question

我有一个表单，希望用户只能在City字段中应用字母，但input type=text允许使用数字。

有人能帮我找到一个解决方案吗？这样你就只能键入字母(a-z(了。

我尝试过使用RegExp，但它对我不起作用。我正在使用WordPress，也许它与它有关。如果在regex之前还有其他解决方案，我会很感激。

<div class="mc-address-fields-group">
<div class="mc-field-group">
<label for="mce-ADDRESS-city">City</label>
<input type="text" maxlength="40" name="CITY" id="mce-ADDRESS-city" class="required" required>
</div>
<div class="mc-field-group">
<label for="mce-ADDRESS-zip">Zip Code</label>
<input type="number" onKeyDown="if(this.value.length==4 && event.keyCode!=8) return false;" name="ZIP" id="mce-ADDRESS-zip" class="required" required>
</div>
</div>

Answer 1

您可以将pattern属性添加到<input type="text">元素中。只有当type是text时，这才会起作用。

您可以从以下模式开始："[a-zA-Z][a-zA-Z ]*"

注意：不要忘记在城市名称中允许使用字母AND空格。应该允许的其他字符包括连字符(-(、点(.(和撇号('(等。

function validateZip(event) {
// Triple-equals is preferred over double-equals equality
if (event.target.value.length === 5 && event.keyCode !== 8) {
event.preventDefault();
return false;
};
}

form {
display: flex;
flex-direction: column;
gap: 1rem;
}
button[type="submit"] {
align-self: center;
}
.mc-address-fields-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mc-field-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.mc-field-group label {
font-size: smaller;
}

<form>
<div class="mc-address-fields-group">
<div class="mc-field-group">
<label for="mce-ADDRESS-city">City</label>
<input
type="text" name="CITY" id="mce-ADDRESS-city" class="required"
placeholder="Enter a city name (letters and spaces only)"
pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
</div>
<div class="mc-field-group">
<label for="mce-ADDRESS-zip">Zip Code</label>
<input
type="number" name="ZIP" id="mce-ADDRESS-zip" class="required"
placeholder="Enter a valid zip code e.g. 12345"
onKeyDown="validateZip(event)" required>
</div>
</div>
<button type="submit">Submit</button>
</form>

正确的邮政编码验证

仅供参考，我不会将邮政编码字段设为数字，因为有些邮政编码是零填充的。例如，马萨诸塞州的邮政编码以零开头。

form {
display: flex;
flex-direction: column;
gap: 1rem;
}
button[type="submit"] {
align-self: center;
}
.mc-address-fields-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mc-field-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.mc-field-group label {
font-size: smaller;
}

<form>
<div class="mc-address-fields-group">
<div class="mc-field-group">
<label for="mce-ADDRESS-city">City</label>
<input
type="text" name="CITY" id="mce-ADDRESS-city" class="required"
placeholder="Enter a city name (letters and spaces only)"
pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
</div>
<div class="mc-field-group">
<label for="mce-ADDRESS-zip">Zip Code</label>
<input
type="text" name="ZIP" id="mce-ADDRESS-zip" class="required" 
placeholder="Enter a valid zip code e.g. 12345"
pattern="d{5}" maxlength="5" required>
</div>
</div>
<button type="submit">Submit</button>
</form>

Answer 2

您可以使用pattern属性：

<input type="text" pattern="[a-zA-Z]">

不确定是否需要为开始和结束添加^和$，但这是防止数字字符的方法。