在html5中，我们可以通过给<input>标签设置不同的type属性值，以及搭配相关的验证属性，来实现搜索框的输入类型限制和输入验证功能。这种方式不需要依赖额外的JavaScript代码，就能完成基础的输入校验，提升开发效率。
html5中搜索框常用的type属性
搜索框最基础的type属性取值是search，它是html5专门为搜索场景新增的输入类型，浏览器会对该类型的输入框做适配，比如部分浏览器会在输入框右侧显示清除按钮，方便用户快速清空输入内容。
除了search类型之外，我们还可以根据搜索场景的需求，选择其他type属性值来限制输入类型：
- text：通用文本类型，允许输入任意字符，是默认的type取值
- number：限制输入内容为数字，会自带数字增减按钮
- email：限制输入内容符合邮箱格式
- tel：限制输入内容为电话号码，移动端会弹出数字键盘
通过type属性实现基础输入限制
如果我们需要一个只能输入数字的搜索框，比如搜索商品编号的场景，就可以把type设置为number，浏览器会自动限制用户不能输入非数字内容。
下面是一个只允许输入数字的搜索框示例代码：
<form action="/search" method="get"> <!-- 设置type为number，限制输入为数字 --> <input type="number" name="productId" placeholder="请输入商品编号"> <button type="submit">搜索</button> </form>
如果要实现普通的关键词搜索框，使用search类型即可，代码如下：
<form action="/search" method="get"> <!-- 设置type为search，适配搜索场景 --> <input type="search" name="keyword" placeholder="请输入搜索关键词"> <button type="submit">搜索</button> </form>
搭配验证属性实现更灵活的输入校验
仅靠type属性只能实现基础的类型限制，如果需要更复杂的验证规则，比如限制搜索关键词的长度、限制输入内容符合特定格式，可以搭配html5的验证属性使用。
常用验证属性说明
| 属性名 | 作用 |
|---|---|
| required | 设置输入框为必填项，提交时如果为空会提示用户填写 |
| pattern | 设置正则表达式，输入内容必须匹配该正则才会通过验证 |
| minlength | 设置输入内容的最小长度 |
| maxlength | 设置输入内容的最大长度 |
验证属性使用示例
比如我们需要一个必填的搜索框，且搜索关键词长度必须在2到10个字符之间，同时只能包含中文、字母和数字，就可以用下面的代码实现：
<form action="/search" method="get">
<input
type="search"
name="keyword"
placeholder="请输入2-10位的中文、字母或数字"
required
minlength="2"
maxlength="10"
pattern="^[u4e00-u9fa5a-zA-Z0-9]{2,10}$"
>
<button type="submit">搜索</button>
</form>
如果用户没有输入内容就提交表单，浏览器会提示请填写此字段；如果输入的内容不符合正则规则，会提示请匹配要求的格式；如果输入长度不符合要求，也会给出对应的提示。
自定义验证提示信息
默认的浏览器验证提示是英文的，如果需要自定义中文提示，可以使用<input>的setCustomValidity方法，通过JavaScript来设置提示内容。
示例代码如下：
<form action="/search" method="get" id="searchForm">
<input
type="search"
name="keyword"
placeholder="请输入2-10位的中文、字母或数字"
required
minlength="2"
maxlength="10"
pattern="^[u4e00-u9fa5a-zA-Z0-9]{2,10}$"
id="searchInput"
>
<button type="submit">搜索</button>
</form>
<script>
// 获取搜索框元素
const searchInput = document.getElementById('searchInput');
// 监听输入事件，自定义验证提示
searchInput.addEventListener('input', function() {
if (this.validity.valueMissing) {
this.setCustomValidity('搜索关键词不能为空');
} else if (this.validity.patternMismatch) {
this.setCustomValidity('请输入2-10位的中文、字母或数字');
} else if (this.validity.tooShort) {
this.setCustomValidity('搜索关键词不能少于2个字符');
} else if (this.validity.tooLong) {
this.setCustomValidity('搜索关键词不能超过10个字符');
} else {
this.setCustomValidity('');
}
});
</script>
这样用户触发验证的时候，就会看到我们自定义的中文提示信息，体验更好。
注意事项
- html5的输入验证只是前端验证，不能替代后端验证，因为用户可以绕过前端验证直接提交请求，所以后端也必须做对应的输入校验
- 部分老版本浏览器可能不支持某些type属性值或验证属性，需要做兼容性处理，或者使用JavaScript做降级兼容
- pattern属性设置的正则表达式不需要写前后的斜杠，直接写正则内容即可