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: 使用自定义验证错误提示信息