搜索框,一目了然。然并卵,显示跟普通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>

03-15 02:00