HTML5常用表单验证
来源:互联网 发布:网络摄像机监控软件 编辑:程序博客网 时间:2024/06/03 14:49
1 字符串相关
placeholder : 当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
required : 规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法。
pattern : 规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。
maxLength : 字段最大长度。
oninvalid : 验证不成功时的提示信息。
字符串输入验证1.1 设置最大长度<input type="text" name="memo" placeholder="请填写备注" maxLength="100" oninvalid="validatelt(this,'备注,长度0~100')"/>1.2 设置输入格式<input type="text" path="typeName" placeholder="请填写类型名称" required="true" pattern=".{0,40}" oninvalid="validatelt(this,'类型名称,长度0~40')"/><input type="text" id="phone" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="请按照xxx-xxxx-xxxx样式输入电话号码"/></p>1.3 电子邮件<input type="email" id="email" name="email" placeholder="请填写电子邮件,类似example@web.com"/>1.4 日期<input type="date" id="beginTime" name="beginTime" placeholder="YYYY/MM/DD"/>1.5 自定义选择列表<input type="text" id="style" name="style" list="stylelist" title="选择样式" autocomplete="off"/><datalist id="stylelist"> <option value="White" label="白色"/> <option value="Gray" label="灰色"/> <option value="RED" label="红色"/></datalist>1.6 URL<input type="url" list="url_list" name="link" /><datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /></datalist>
2 数值相关
2.1 设置输入最小值<input type="number" min="0" value="20"/>2.2 设置输入最大值<input type="number" max="100" value="20"/>2.3 设置输入取值区间,其中step为步长,默认为1,可不设<input type="range" max="0" max="100" step="5" value="20"/>
3 日期相关
<input type="date" id="beginTime" name="beginTime" placeholder="YYYY/MM/DD"/>
阅读全文
0 0
- HTML5常用表单验证
- HTML5表单自动验证
- HTML5表单及其验证
- HTML5 中的表单验证
- HTML5中的表单验证
- HTML5表单验证
- HTML5表单及其验证
- html5 智能表单验证
- 表单验证使用HTML5
- HTML5表单验证
- HTML5表单及其验证
- HTML5表单及其验证
- HTML5表单验证特性
- HTML5表单及其验证
- HTML5表单验证
- html5表单验证
- HTML5表单及其验证
- HTML5 - 表单客户端验证
- AR项目的简单实现过程
- 神奇密码锁 bfs
- React Native项目建立
- JAVA虚拟机总结以看别人Blog理解
- Mac上相关安装和一些命令的使用
- HTML5常用表单验证
- bat命令模拟加载---巧用ping命令
- 《剑指offer》不用加减乘除做加法
- docker学习笔记(一)
- ubuntu16.04离线安装NIVIDIA驱动
- PCB孔铜厚度标准及成品铜厚构成、由来
- 1196---排序问题
- 如何轻松搭建本地PHP环境
- a++ 和++a做左值得区别