本文摘自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》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5表单验证的解析