• 售前

  • 售后

热门帖子
入门百科

html5表单的required属性使用

[复制链接]
六翼天使494 显示全部楼层 发表于 2021-8-14 15:09:58 |阅读模式 打印 上一主题 下一主题
描述

本日无意之中发现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无效
效果
就是一个简朴的提示要输入改文本框

如何自界说提示笔墨
  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属性。
到此这篇关于html5表单的required属性利用的文章就介绍到这了,更多干系html5表单required属性内容请搜索脚本之家从前的文章或继续欣赏下面的干系文章,盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作