请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
我爱我卿 新手上路
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子2
Ta的其他帖子
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] html5表单的required属性使用

[复制链接]
我爱我卿 发表于 2021-7-24 09:32:59 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性


required 属性是一个布尔属性
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。


  1. <input required="required">
复制代码
  1. <form method="post" action="">
  2.       用户名<input type="text" id="username" required="required"><br>
  3.       密码<input type="password" id="password" required><br>
  4.       <input type="submit" value="登录" >
  5.   </form>
复制代码

注意:
1:required和required="required"效果是一样的,只不过前者是简写
2:必须要用form标签把代码包裹起来才有效
3:点击的按钮必须要是submit类型,类型为button无效

效果

就是一个简单的提示要输入改文本框

2021070516581970.png

如何自定义提示文字

  1. 用户名<input type="text" id="username" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');">
复制代码
如何让required失效1:把按钮类型变成button而不是submit
2:提交按钮添加formnovalidate属性

  1.   <form method="post" action="">
  2.                    用户名<input type="text" id="username" required="required"><br>
  3.                    密码<input type="password" id="password" required><br>
  4.                    <input type="submit" value="登录" formnovalidate >
  5.            </form>
复制代码

3:在元素中添加novalidate属性,禁用整个表单的验证功能

  1.   <form method="post" action="" novalidate>
  2.                    用户名<input type="text" id="username" required="required"><br>
  3.                    密码<input type="password" id="password" required><br>
  4.                    <input type="submit" value="登录" >
  5.            </form>
复制代码

4,pattern属性 - 使用正则表达式验证
(1)不必使用^和$字符表示要匹配字段值得开头和结尾。
(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。


回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号