如何在HTML pattern属性及JavaScript中实现仅ASCII字符输入校验？

嘿，我来帮你搞定这两个问题，先从JavaScript的检查方法说起，再修复你HTML表单里的验证问题～

要判断一个字符串是否只包含ASCII字符，你可以使用正则表达式 /^[\x00-\x7F]*$/，其中：

• ^ 匹配字符串的起始位置
• [\x00-\x7F] 匹配任意一个ASCII字符（ASCII码范围是0到127，对应十六进制的\x00到\x7F）
• * 允许零个或多个这样的字符
• $ 匹配字符串的结束位置

把这个正则封装成一个函数，用起来就很方便：

function isOnlyASCII(str) {
  const asciiRegex = /^[\x00-\x7F]*$/;
  return asciiRegex.test(str);
}

// 测试示例
console.log(isOnlyASCII("Hello ASCII!")); // 输出 true
console.log(isOnlyASCII("你好，非ASCII字符")); // 输出 false
console.log(isOnlyASCII("¶")); // 输出 false

调用这个函数后，它会返回布尔值，告诉你传入的字符串是否符合要求。

你现在的pattern="[\x00-\x7F]"之所以没生效，是因为这个正则只匹配单个ASCII字符，而且没有限定整个输入内容必须完全符合规则——也就是说，只要输入里有一个ASCII字符（比如你输入abc¶，里面的a能匹配上），浏览器就会认为验证通过，不会触发错误。

你需要把完整的正则（包含^、$和量词）写到pattern属性里，修正后的代码如下：

<form class="row" name="marketDetails">
  <input 
    type="text" 
    class="form-control col-md-12 form-sm" 
    name="name" 
    id="name" 
    placeholder="Name" 
    value="" 
    maxlength="50" 
    pattern="^[\x00-\x7F]*$" 
    ng-model="vm.marketMetaData.market_name" 
    required
  />
</form>

补充说明： #

• 如果要求用户必须输入至少一个ASCII字符（结合required属性其实已经能实现非空验证，不过更严谨的话），可以把*换成+，也就是pattern="^[\x00-\x7F]+$"，这样空输入也会触发验证错误（不过required已经做了这件事，看你的需求选择即可）。
• 如果你想给用户更实时的反馈，还可以结合JavaScript监听输入事件，比如：

const nameInput = document.getElementById('name');
nameInput.addEventListener('input', function(e) {
  const isValid = /^[\x00-\x7F]*$/.test(e.target.value);
  if (!isValid) {
    e.target.setCustomValidity('请仅输入ASCII字符');
  } else {
    e.target.setCustomValidity('');
  }
});

这样用户输入非ASCII字符时，输入框会立刻显示自定义的错误提示，不用等到提交表单才发现问题。

内容的提问来源于stack exchange，提问作者badigard