搜索框,一目了然。然并卵,显示跟普通text一模一样。
6)Date pickers 和 color
一样的一目了然,一样的然并卵,只有Opera9+才支持。
2、pattern属性
HTML5对表单元素提供了patern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
如果值为空,则pattern属性不起作用。所以需要给它加一个required属性。
3、正则表达式的写法
以“^”开始,以“$”结束,如 ^\d{13}$ 表示13位数字。其它的跟正则表达式的规则一模一样。
4、required属性
HTML5中的required属性要求表单控件不能为空,必须填写值。此属性与pattern正则结合使用更爽。
5、min属性与max属性
顾名思义,就知道这两个属性用于控制数字的最大值和最小值了。其实除了控制数值以外,还可以控制日期的范围。类型为number和range时支持。
6、step属性
这个是步进。类型为number和range时支持。
7、修改验证失败的提示语
<!DOCTYPE html>
<form>
<input id="text" pattern="^1[3-9]\d{9}$" required />
<input id="button" type="submit" />
</form>
<script>
text.oninput=function(){
text.setCustomValidity("");
};
text.oninvalid=function(){
text.setCustomValidity("请不要输入火星的手机号好吗?");
};
</script>