使用HTML input pattern属性实现允许首尾空白、至少含1个非空白字符的校验问题

问题原因及解决方案 #

1. 首尾存在空白时无法提交的问题

你当前使用的.*\S.*正则逻辑本身是符合要求的，HTML的pattern属性默认会对整个输入值做全匹配，该规则可以正确匹配包含至少1个非空白字符、首尾带任意空白的字符串。如果出现首尾带空白就无法提交的情况，优先排查页面是否存在其他自定义表单校验逻辑自动修剪了输入的首尾空白，排除其他逻辑影响后如果仍有兼容问题，可以将pattern替换为兼容性更强的写法：\s*\S[\s\S]*。

2. 输入字符后按空格自动加句号的问题

该现象和pattern校验规则完全无关，是浏览器/输入法自带的自动更正、拼写检查、自动大写等功能触发的，给input元素添加对应关闭属性即可解决。

修改后完整代码 #

<input type="text" class="form-control" id="agentName" name="agentName" placeholder="Agent Name" pattern="\s*\S[\s\S]*" title="This field is required" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

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