H5利用pattern属性和oninvalid属性验证表单
来源:互联网 发布:中国人爱吃 知乎 编辑:程序博客网 时间:2024/04/29 07:31
HTML代码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head><body><form action="demo-form.php"> 手机号: <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" oninvalid="setCustomValidity('请输入11位手机号');"/> <br> <input type="submit"></form></body></html>
运行结果
TIP:这里只写了手机号码的验证,用作示例,若需要验证其它东西,只需在pattern属性里写对应的正则表达式即可。也可以使用input类型里除了text的其它类型来做验证,比如
<input type="email"><input type="number">
属性解释
- pattern:属性规定用于验证输入字段的正则表达式。
- oninvalid:提交的input元素的值为无效值时(这里是正则验证失败),触发oninvalid事件。oninvalid属于Form 事件。
- setCustomValidity():这个是HTML5内置的JS方法,用来自定义提示信息
- maxlength:限定input最大输入长度
其它属性
- required:增加一个非空验证。ps——我这里有正则就没写
- oninput:该事件在 input 或 textarea 元素的值发生改变时触发。
总结
- 优点:简单方便。
- 缺点:提示的UI不是太漂亮,无法做多个验证,必须表单提交才能验证(即ajax无效)。
- 建议:在要求比较简单的时候可以考虑使用H5验证表单,也可以使用内置JS函数加各种事件自定义一个验证函数,不过这样不仅兼容是个问题,而且还麻烦,倒不如直接使用JQ插件验证
在线测试工具
这里我测试是用的菜鸟教程在线工具,点击旁边的菜鸟工具会进入到这个页面
觉得不错就推荐给大家了。
0 0
- H5利用pattern属性和oninvalid属性验证表单
- html5表单pattern属性配合正则验证电话和手机号码
- H5表单的pattern验证
- h5表单的标题和属性
- H5表单和一些新属性
- H5表单相关新增元素和属性
- H5新表单属性
- h5表单基本属性
- H5表单属性
- HTML5 表单验证的oninvalid事件
- H5新增的表单属性
- h5 form表单新增属性
- h5表单新增元素与属性control、placeholder、list、AutoComplete、pattern、SelectionDirection、indeterminate、
- 疯狂H5讲义笔记 - 表单相关元素和属性
- 表单验证---Onsubmit 属性
- H5游戏利用社交平台和其传播属性
- H5中form表单中新增属性
- h5新增表单控件及其相关属性
- 居中一个div
- 抢红包
- dp和px互转
- ffmpeg去黑边参数
- libnids使用和说明
- H5利用pattern属性和oninvalid属性验证表单
- scala类型系统context bounds
- 字符编解码的故事(ASCII,ANSI,Unicode,Utf-8区别)
- jQuery.event兼容各浏览器的event详细解析
- Android-自定义输入法的功能按钮
- Linux驱动学习笔记之触摸屏驱动
- 。。iOS 根据美工给的16进制 得到颜色Color
- NOIP模拟题 2016.11.4 [数论] [费马小定理] [最短路] [建图]
- UVA - 11624 Fire!