H5表单

  • A+
所属分类:web教程

新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过
移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎
chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
例子 : 用JS来显示当前数值
新的输入型控件_2
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
- placeholder : 输入框提示信息
例子 : 微博的密码框提示
- autocomplete : 是否提示用户输入过值
默认为on,关闭提示选择off
- autofocus : 指定表单获取输入焦点
- list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
- required : 此项必填,不能为空
- Pattern : 正则验证 pattern="d{1,5}“
- Formaction 在submit里定义提交地址
表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
- oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
value: 输入为空false
- valueMissing : 输入值为空时true
- typeMismatch : 控件值与预期类型不匹配
- patternMismatch : 输入值不满足pattern正则
- tooShort : 小于minLength最小限制
- tooLong : 超过maxLength最大限制
- rangeUnderflow : 验证的number/range最小值
- rangeOverflow:验证的number/range最大值
- stepMismatch: 验证number/range 的当前值 是否符合min、max及step的规则
-setCustomValidity(); 自定义验证
表单验证
- Invalid事件 : 验证反馈
input.addEventListener('invalid',fn,false)
阻止默认验证:ev.preventDefault()
- formnovalidate属性 : 关闭验证

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: