input如何快速进行规则校验

input输入框是日常前端开发过程中经常会遇到的，输入框是为了进行用户交互，用户提交或输入数据，那么在安全方面我们要做好把控工作，通常我们会制定规则来限制用户输入，在表单属性之外的如何快速校验呢？我们一起来看看把！

一、input输入框类型

input的类型共有18种（其中H5新增7种类型）如下所示：

二、pattern属性介绍

pattern 属性规定用于验证输入字段的模式（模式指的是正则表达式）。

注释：pattern 属性适用于以下 <input> 类型：text, search, url, tel, email 以及 password 。

三、通过pattern属性来实现

需求：输入框内只能输入26个英文字母中的三个，且必须以字母N开头。

解决方案：使用表单的pattern属性来完成校验并作出提示。

四、代码

<div>
    <label for="txt">字母</label>
    <input type="text" name="txt" id="txt" placeholder="请输入字母" pattern="^A[A-z]{2}" title="只能输入26个英文字母中的三个字母，以A开头">
    <input type="submit" value="提交">
</div>

image.png

五、结论

通过pattern属性可直接在提交表单时对输入的数据作出校验，提高用户体验，减少以往的javascript或jquery校验。