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

  • 相关阅读:
    SZU:B47 Big Integer II
    Plan : 破晓
    C程序设计语言(第二版)习题:第二章
    Linux : fedora 安装 vnc server
    Linux系统编程:客户端-服务器用FIFO进行通信
    Linux系统编程:dup2()重定向
    Vijos: P1046观光旅游
    FLOYD 求最小环
    uva 401.Palindromes
    codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers
  • 原文地址:https://www.cnblogs.com/zhouqi666/p/5909241.html
Copyright © 2020-2023  润新知