标签：
HTML5之表单
Forms
l 新的输入型控件
? email : 电子邮箱文本框，跟普通的没什么区别
– 当输入不是邮箱的时候，验证通不过
– 移动端的键盘会有变化
<form>
<inputtype="email" />
<inputtype="submit" />
</form>
? tel : 电话号码
? url : 网页的URL
? search : 搜索引擎
– chrome下输入文字后，会多出一个关闭的X
? range : 特定范围内的数值选择器
– min、max、step( 步数 )
– 例子 : 用JS来显示当前数值
<form>
<inputtype="range" step="2" min="0" max="10"value="2" />
<inputtype="submit" />
</form>
l 新的输入型控件_2
? number : 只能包含数字的输入框
<form>
<inputtype="number"/>
<inputtype="submit" />
</form>
? color : 颜色选择器
? datetime : 显示完整日期
? datetime-local : 显示完整日期，不含时区
? time : 显示时间，不含时区
? date : 显示日期
? week : 显示周
? month : 显示月
l 新的表单特性和函数
? placeholder : 输入框提示信息
– 例子 : 微博的密码框提示
<form>
<inputtype="text" placeholder="请输入4-16个字符" />
<inputtype="submit" />
</form>
注意：与value类似，只是当鼠标一点上，提示语自动消失
? autocomplete : 是否保存用户输入值
– 默认为on，关闭提示选择off
? autofocus : 指定表单获取输入焦点
<form>
<inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
<input type="password" placeholder="请输入4-16个字符" name="password"autocomplete="off" autofocus />
<inputtype="submit" />
</form>
? list和datalist : 为输入框构造一个选择列表
– list值为datalist标签的id
? required : 此项必填，不能为空
<form>
<inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required/>
<input type="password" placeholder="请输入4-16个字符" name="password"autocomplete="off" required />
<inputtype="submit" />
</form>
? Pattern : 正则验证 pattern="\d{1,5}“
? Formaction 在submit里定义提交地址
<formaction="http://www.baidu.com">
<inputtype="text" placeholder="请输入4-16个字符" name="user" autocomplete="off"pattern="\d{1,5}" />
<inputtype="submit" value="提交" />
<inputtype="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
</form>
l 表单验证
? validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
– oText.addEventListener("invalid",fn1,false);
– ev.preventDefault()
–
<form>
<inputtype="text" required id="text"/>
<inputtype="submit" />
</form>
<script>
varoText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.valid);
ev.preventDefault();
}
</script>
– valueMissing : 输入值为空时
<script>
varoText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.valueMissing);
ev.preventDefault();
}
//valueMissing 当输入值为空的时候返回true
– typeMismatch : 控件值与预期类型不匹配
<form>
<inputtype="email" id="text"/>
<inputtype="submit" />
</form>
<script>
varoText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.typeMismatch);
ev.preventDefault();
}
//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
</script>
– patternMismatch : 输入值不满足pattern正则
<form>
<inputtype="text" id="text" pattern="\d{1,5}"/>
<inputtype="submit" />
</form>
<script>
varoText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.patternMismatch);
ev.preventDefault();
}
//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
</script>
– tooLong : 超过maxLength最大限制
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
– rangeUnderflow : 验证的range最小值
– rangeOverflow：验证的range最大值
– stepMismatch: 验证range 的当前值是否符合min、max及step的规则
– customError 不符合自定义验证
? setCustomValidity(); 自定义验证
<form>
<inputtype="text" id="text" />
<inputtype="submit" />
</form>
<script>
varoText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()
{
if(this.value=="敏感词")
{
this.setCustomValidity("请不要输入敏感词");
}
else
{
this.setCustomValidity("");
}
};
function fn()
{
alert(this.validity.customError);
ev.preventDefault();
}
//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
//customError 不符合在定义验证的时候返回true
</script>
l 表单验证
? Invalid事件 : 验证反馈 input.addEventListener(‘invalid‘,fn,false)
– 阻止默认验证：ev.preventDefault()
? formnovalidate属性 : 关闭验证
保存到草稿箱，不需要进行验证，则可以关闭验证，实现提交时，验证，而保存到草稿箱则不验证的功能
<form action="http://www.baidu.com">
<inputtype="text" placeholder="请输入4-16个字符" name="user" pattern="\d{1,5}" required />
<inputtype="submit" value="提交" />
<inputtype="submit" value="保存至草稿箱" formaction="http://www.qq.com"formnovalidate />
</form>
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51371707
