HTML第一篇:如何有效地利用input的type自带的校验以及进一步提高校验的精确度

本文详细介绍了HTML5中各种input类型的使用场景,包括按钮、复选框、日期选择器等,并探讨了如何利用min、max及pattern属性进行数据校验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先介绍下HTML5 支持的 input 类型(type属性值):

描述
button定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox定义复选框。
color定义拾色器。
date定义日期字段(带有 calendar 控件)
datetime定义日期字段(带有 calendar 和 time 控件)
datetime-local定义日期字段(带有 calendar 和 time 控件)
month定义日期字段的月(带有 calendar 控件)
week定义日期字段的周(带有 calendar 控件)
time定义日期字段的时、分、秒(带有 time 控件)
email定义用于 e-mail 地址的文本字段
file定义输入字段和 "浏览..." 按钮,供文件上传
hidden定义隐藏输入字段
image定义图像作为提交按钮
number定义带有 spinner 控件的数字字段
password定义密码字段。字段中的字符会被遮蔽。
radio定义单选按钮。
range定义带有 slider 控件的数字字段。
reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search定义用于搜索的文本字段。
submit定义提交按钮。提交按钮向服务器发送数据。
tel定义用于电话号码的文本字段。
text默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url定义用于 URL 的文本字段。

W3school有详细的讲解,这里就不多说了。

在上面那些type中,直接在html校验的type就两个 email 和 url

我们虽然定义了type,但是有时候还是并不满足我们的需求,比如定义了type="number",但是经过测试发现并没有进行校验,这种情况就需要另外处理。可以用min 和max属性做一个简单的校验。min代码输入的最小值,max代表输入的最大值。

重点:另外还有 pattern 属性是对input标签的输入内容也能做一个校验。类似于正则表达式进行过滤筛选。

用的时候不必担心和原本的标签校验会冲突,默认是先进行标签本身的校验,才会进行pattern的校验。

pattern的定义规则完全遵循正则表达式。

这个地方就按自身需求定义吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值