当前位置:  首页  >  前端开发  >  Html5

HTML5表单验证的解析-

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

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


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

运行


《script》 text.oninput=function(){ text.setCustomValidity(""); }; text.oninvalid=function(){ text.setCustomValidity("请不要输入火星的手机号好吗?"); }; 《script》

  其实我觉得HTML5的这套API设计的很糟糕,虽然可以满足基本需求,但还真不太实用。

手机页面中表单提交用JavaScript验证信息 会弹出窗口,用户体验极差,所以再给出一个手机端用HTML5的属性来验证的示例:




 // 主要用了HTML的一下属性   
// 1.placeholder 提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获   
//得焦点时消失   
//2.required 属性规定必需在提交之前填写输入字段   
//3.pattern  是正则表达式,  里面可以直接填写正则表达式

HTML5 实现访问本地文件的方法

以上就是HTML5表单验证的解析的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有