HTML5表单验证
1.HTML5表单验证已经出来很长时间了,除了IE之外的浏览器基本都满足要求。
<input> 标签:text, search, url, telephone, email 以及 password。
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
email: <input type="email" name="user_email">
在提交表单时,会自动验证 email 域的值。
Homepage: <input type="url" name="user_url" />
在提交表单时,会自动验证 url 域的值。
Points: <input type="number" name="points" min="1" max="10" />
number 类型用于应该包含数值的输入域。
min 最小值 max最大值 step数字间隔 value 默认值
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。您还能够设定对所接受的数字的限定:
<input type="range" name="points" min="1" max="10" />
Input 类型 - Date Pickers(日期选择器)
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
下面的例子允许您从日历中选取一个日期:
实例
Date: <input type="date" name="user_date" />
HTML5 的新的表单属性
autocomplete 属性
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
表单的自动完成功能是打开的,而 e-mail 域是关闭的。
autofocus 属性规定在页面加载时,域自动地获得焦点。
User name: <input type="text" name="user_name" autofocus="autofocus" />
表单重写属性
表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。
formaction - 重写表单的 action 属性
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
这些属性对于创建不同的提交按钮很有帮助。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
<input type="image" src="img_submit.gif" width="99" height="99" />
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
验证手机
<input type="text" name="mobile" autocomplete="off" pattern="^1[345678][0-9]{9}$" required />