H5 表单

发布于:2023-01-22 ⋅ 阅读:(693) ⋅ 点赞:(0)

H5 表单


鼠标元素

onmousemove: 鼠标移动事件

表单元素

表单输入类型

email: 邮箱类型

url: 地址类型

number: 数字类型

​ 1、max: 规定允许的最大值

​ 2、min: 规定允许的最小值

​ 3、step: 规定合法的数字间隔(如果step=“3”,则合法数是-3、0、3、6)

​ 4、value: 规定的默认值

range: 进度条类型

​ 1、max: 规定允许的最大值

​ 2、min: 规定允许的最小值

​ 3、step: 规定合法的数字间隔(如果step=“3”,则合法数是-3、0、3、6)

​ 4、value: 规定的默认值

search: 搜索类型

color: 颜色类型

tel: 手机号类型

Date pickers: 日期类型

​ 1、date: 选择日、月、年

​ 2、month: 选择月、年

​ 3、week: 选择周和年

​ 4、time: 选择时间(小时和分钟)

​ 5、datetime: 选择时间、日、月、年(UTC时间)

​ 6、datetime-local: 选择时间、日、月、年(本地时间)

表单属性

1、form属性

autocomplete: 规定form或input域应该拥有自动完成功能

novalidate: 规定在提交表单时不应该验证form或input域

2、input属性

autofocus: 页面加载自动获得焦点

required: 规定输入域不能为空

placeholder:

pattern: 正则表达式5

正则表达式:(Regular Expression)是计算机科学的一个概念,使用单个字符串来描述、匹配一系列符合某个句法规则的字符串
KaTeX parse error: Can't use function '$' in math mode at position 15: ^[A-Za-z0-9]+$̲ //匹配由数字和2…
height、width:

如何自定义进行表单验证?

validity属性

Validity属性获取表单元素的validityState对象,该对象包括8个方面的验证结果

var validityState=document.getElementById("uName").validity;
validityState对象

valueMissing : 必填的表单值为空

目的:确保表单中的值已填写
用法:将表单元素设置了required特性,则为必填项;如果必填项输入值为空,valueMissing属性将返回 true,否则返回false

<input type="text" required="required" />

typeMismatch: 输入值与type类型不匹配

目的:保证输入值与预期类型相匹配(url、 email等)
用法:指定表单控件的type特性值,如:输入值不符合对应的表单类型,valueMissing属性将返回true, 否则返回false

<input type="email" required="required"/>

patternMismatch: 输入值与pattern特性的正则不匹配

目的:根据表单元素设置的格式规则验证输入是否为有效格式
用法:在表单元素的上设置pattern特性,并赋予适当的匹配规则,如输入值不符合验证模式规则, patternMismatch属性将返回true,否则返回false

tooLong: 输入内容超过限定长度

rangeUnderflow: 输入值小于min特性的值

rangeOverflow: 输入值大小max特性的值

stepMismatch: 输入值不符合step特性规则

customError: 使用自定义验证错误提示信息

rangeUnderflow: 输入值小于min特性的值

rangeOverflow: 输入值大小max特性的值

stepMismatch: 输入值不符合step特性规则

customError: 使用自定义验证错误提示信息

本文含有隐藏内容,请 开通VIP 后查看