阿里云

input如何快速进行规则校验

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


一、input输入框类型

input的类型共有18种(其中H5新增7种类型)如下所示:

序号

类型

名称

1

button

按钮

2

checkbox

复选框

3

file

文件

4

hidden

隐藏域

5

image

图像

6

password

密码框

7

radio

单选框

8

reset

重置

9

submit

提交

10

text

文本

11

tel

电话

HTML5新增类型

12

email

邮箱

13

url

链接

14

number

数字

15

range

范围内数字值

16

Date pickers

日期和时间

17

search

搜索域

18

color

颜色


二、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校验。

喜欢就点个赞吧