HTML5(H5)表单验证

关键词

HTML5 H5 表单验证

摘要

本文介绍HTML5(H5)表单验证的相关要点，如pattern、require等属性。

1、新增的type类型

1）number
数字类型。

2）email
邮箱类型。

3）url
网址类型。

4）range
范围。

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