HTML5表单验证

  

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  />

原文地址:https://www.cnblogs.com/zhouqi666/p/5909241.html