html5 表单的required属性
2023-09-11 14:22:31 时间
html5 表单的required属性
描述
今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性
定义和用法
required 属性是一个布尔属性
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
。
语法使用
<input required="required">
<form method="post" action="">
用户名<input type="text" id="username" required="required"><br>
密码<input type="password" id="password" required><br>
<input type="submit" value="登录" >
</form>
注意:
1:required和required="required"效果是一样的,只不过前者是简写
2:必须要用form标签把代码包裹起来才有效
3:点击的按钮必须要是submit类型,类型为button无效
效果
就是一个简单的提示要输入改文本框
如何自定义提示文字
用户名<input type="text" id="username" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');"><br>
如何让required失效
1:把按钮类型变成button而不是submit
2:提交按钮添加formnovalidate属性
<form method="post" action="">
用户名<input type="text" id="username" required="required"><br>
密码<input type="password" id="password" required><br>
<input type="submit" value="登录" formnovalidate >
</form>
3:在元素中添加novalidate属性,禁用整个表单的验证功能
<form method="post" action="" novalidate>
用户名<input type="text" id="username" required="required"><br>
密码<input type="password" id="password" required><br>
<input type="submit" value="登录" >
</form>
4,pattern属性 - 使用正则表达式验证
(1)不必使用^和$字符表示要匹配字段值得开头和结尾。
(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。
相关文章
- 一些有用的HTML5 pattern属性
- 游戏测试 | 测试工具:做一个可以即时修改卡牌属性的工具方便测试
- 为SQL Server表中的列添加/修改/删除注释属性sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty
- Google Earth Engine(GEE)——利用Landsat 5 每一期影像制作动画时序并附带时间属性
- Google Earth Engine(GEE)——连接join,两个影像集合的通过时间属性来进行equals连接
- JavaScript - 二维对象数组去重(根据某一属性)
- [WPF]使用附加属性处理 ScrollViewer 的滚动轮劫持问题
- 安全开发:Spring Boot 打开 HttpOnly 和 Secure 属性
- HTML5 data-* 自定义属性
- HTML5中<script>标签中的defer与async属性详解
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性
- HTML5新特性: 自定义属性前缀data-以及dataset的使用
- Linux基础:文件基础属性及如何更改文件属性、文件与目录管理、linux软硬链接的理解、linux用户和用户组管理
- 浅析html5中crossorigin属性以及对window.onerror错误监控的影响
- 每个节点里面都有nodeType nodeName nodeValue三个属性
- HTML5学习笔记简明版(10):废弃的元素和属性
- 利用Jquery使用HTML5的FormData属性实现对文件的上传
- [Android] android:visibility属性应用
- C#反射设置属性值和获取属性值
- delete删除属性