emali：电子邮箱文本框，跟普通的没什么区别
-当输入不是邮箱的时候，验证通不过
-移动端的键盘会有变化
<form>
<input type="email">
<input type="submit">
</form>
tel：电话号码
tel的功能主要在移动端，一个键盘的切换
url：网页的URL
<form>
<input type="url">
<input type="submit">
</form>
search：搜索引擎
----charome下输入文字后，会多出一个关闭的X
<form>
<input type="search">
<input type="submit">
</form>
range：特定范围内的数值选择器
-min、max、step(步数)
-例子：用JS来显示当前数值
<form>
<input type="range" step="2" min="0" max="10" value="2">
<input type="submit">
</form>
number：只包含数字的输入框
<form>
<input type="numberl">
<input type="submit">
</form>
color：颜色选择器
<form>
<input type="colorl">
<input type="submit">
</form>
datetime：显示完整的日期
<form>
<input type="datetime">
<input type="submit">
</form>
datetime-local：显示完整日期 不含时区
<form>
<input type="datetime-local">
<input type="submit">
</form>
time：显示时间，不含时区
<form>
<input type="time">
<input type="submit">
</form>
date：显示时间
<form>
<input type="date">
<input type="submit">
</form>
week：显示周
<form>
<input type="weekl">
<input type="submit">
</form>
month：显示月
<form>
<input type="month">
<input type="submit">
</form>
placeholder：输入框提示信息
<form>
<input type="text" placeholder="输入4~16个字符">
<input type="submit">
</form>
autocomplete：是否保存用户输入值
-默认为on，关闭提示选择off
<form>
<input type="text" name="" autocomplete="off">
<input type="submit">
</form>
autofocus：指定表单获取输入焦点
<form>
<input type="text" name="user" autofocus>
<input type="password" name="password">
<input type="submit">
</form>
required：此项必填，不能为空
<form>
<input type="text" name="user" required>
<input type="password" name="password" required>
<input type="submit">
</form>
patten：正则验证 pattern="\d{1,5}"
<form>
<input type="text" name="user" pattern=“\d{1,5}’”>
<input type="submit">
</form>
formaction在submit里定义提交地址
<form>
<input type="text" name="user" pattern="\d{1,5}">
<input type="submit" value="提交">
<input type="submit" vaue="保存至草稿箱" formaction="www.baidu.com">
</form>
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
-oText.addEventListener("invalid",fn1,false);
-ev.preventDefault() ; 阻止默认事件
-valueMissing : 输入值为空时
-typeMismatch : 控件值与预期类型不匹配
-patternMismatch : 输入值不满足pattern正则
-tooLong : 超过maxLength最大限制
-rangeUnderflow : 验证的range最小值
-rangeOverflow：验证的range最大值
-stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
-customError 不符合自定义验证
》setCustomValidity(); 自定义验证
typeMismatch：控件值与预期类型不匹配返回true
<form>
<input type= “email" id= “text">
<input type= "submit“>
</form>
patternMismatch：输入值不满足pattern正则返回true
<form>
<input type= "txet" id= “text" pattern="\d{1,5}">
<input type= "submit“>
</form>
tooLong：超过maxLength最大限制
<form>
<input type= “email" id= “text" maxlength="5">
<input type= "submit“>
</form>
rangeUnderflow：验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch：验证range的当前值是否符合min、max及step的规则
<form>
<input type= “range" value="0" min="2" max="10" step="2">
<input type= "submit“ value="提交">
</form>
customError：不符合自定义验证
oText.oninput = function(){
if(this.value=="敏感词"){
this.setCustomValidity("请不要输入敏感词");
}else{
this.setCustomValidity("")
}
}
function fn(){
alert(this.validity.customError)
ev.preventDefault()
}
<form>
<input type= “text" id= “text">
<input type= "submit“ value="提交">
</form>
Invalid事件：验证反馈
input.addEventListener('invalid'，fn，false)
阻止默认验证：ev.preventDefault
formnovalidate属性：关闭验证
<form action= "http://www.baidu.com">
<input type= "text" id= "text" placeholder= "请输入4~16个字符" name= “user" pattern= "\d{1,5}" required />
<input type= "submit" value= "提交"/>
<input type= " submit" value= "保存至草稿箱" formaction= http://www.baidu.com formnovalidate/>
</form>
来源：oschina
链接：https://my.oschina.net/u/4258768/blog/3537637