UDN-企业互联网技术人气社区

板块导航

浏览  : 2789
回复  : 6

[HTML5] HTML5表单自动验证

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-10 23:46:56 | 显示全部楼层 |阅读模式
    1、required属性:

  1. <form>
  2.         <input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码


     required属性可以用用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。

    required属性表示此输入框是必填项,当提交的时候,如果此输入框为空,那么将提示用户输入后提交。

     立即运行:

  1. [html]
  2. <form>
  3.         <input id="w3cfuns_required" name="w3cfuns.com" required type="text"/>
  4.         <input type="submit" value="提交"/>
  5. </form>
  6. [/html]
复制代码

     2、pattern属性:


  1. <form>
  2.         <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="\d{3}" type="text"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码

     pattern属性的值一般为正则表达式,当用户输入的内容符合一定的格式,那么才能提交,否则将提示用户不符合要求,如上所示必须输入3位数字。

     立即运行:
 
  1. [html]
  2. <form>
  3.         <input id="w3cfuns_pattern" name="w3cfuns.com" required pattern="\d{3}" type="text"/>
  4.         <input type="submit" value="提交"/>
  5. </form>
  6. [/html]
复制代码

     3、min属性和max属性:


  1. <form>
  2.         <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码


     min和max这两个属性是数值类型或日起类型的input元素的专有属性,他限制了input元素中输入的数值和日期范围。属性值为数字。

     立即运行:

  1. [html]
  2. <form>
  3.         <input id="w3cfuns_min_max" name="w3cfuns.com" required min="3" max="16" type="number"/>
  4.         <input type="submit" value="提交"/>
  5. </form>
  6. [/html]
复制代码


    4、step属性:


  1. <form>
  2.         <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码



    step属性控制input元素的值增加或减少的步幅,例如你想让用户输入得值在0-100之间,但是必须是10的倍数时,则如上代码所示,点击下方运行看效果。

     立即运行:

  1. [html]
  2. <form>
  3.         <input id="w3cfuns_step" name="w3cfuns.com" required step="10" min="0" max="100" type="number"/>
  4.         <input type="submit" value="提交"/>
  5. </form>
  6. [/html]
复制代码




相关帖子

发表于 2015-8-18 08:18:07 | 显示全部楼层
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月19日 11:40 详情 回复

这么关注我 好羞涩

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-19 11:40:56 | 显示全部楼层

这么关注我 好羞涩
使用道具 举报

回复

发表于 2015-9-9 10:27:14 | 显示全部楼层
html5 qingda
使用道具 举报

回复

发表于 2016-3-15 09:51:24 | 显示全部楼层
赞一个
使用道具 举报

回复

发表于 2016-3-15 12:50:43 来自手机 | 显示全部楼层
使用道具 举报

回复

发表于 2016-3-15 12:50:49 来自手机 | 显示全部楼层
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部