当前位置: 洪哥笔记 > DHTML > HTML5(H5)表单验证

 

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>

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:HTML5(H5)表单验证:http://www.splaybow.com/post/html5-h5-form-validate-2771.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 百度提供了Bootstrap Glyphicons的CDN 用户体验!UI设计的30条黄金准则 »