HTML5表单验证的解析


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了使用HTML5的表单验证的简单示例,包括手机端利用的一个小例子分享,需要的朋友可以参考下

HTML5对表单元素提供了patern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
  比如下面这个表单内,文本框只接受大陆的手机号,输入其它东西就无法提交
运行

1

2

3

4

5

<!DOCTYPE html>

<form>

  <input id="text" pattern="^1[3-9]\d{9}$" required />

  <input id="button" type="submit" />

</form>

注意只有非空的表单才会使用正则验证,如果什么都不输入的话,pattern不会被使用,所以还需要required协助。但是这个代码弹出的提示是这样的:

这样的提示文字只有猴子看得懂!所以我们还需要更友好的提示文字,使用setCustomValidity方法来定义。
运行

1

2

3

4

5

6

7

8

9

10

11

12

13

<!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+js绘制流星雨的示例代码分享

HTML5中audio与video标签的使用

利用HTML5中的canvas绘制笑脸的代码

聊聊你可能不了解的css属性函数 attr()

HTML5的学习路线分析

h5的地理定位怎样使用

HTML5原生拖拽操作实例讲解

HTML5中video标签无法播放mp4问题的解决办法

常用的HTML5列表标签

详细介绍HTML5响应式设计实现九宫格的示例代码(图)

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...