H5 form表单类型
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>