html5表单的required属性使用
2021-07-11 16:54
1096 查看
描述
今天无意之中发现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('');">
如何让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表单的required属性使用的文章就介绍到这了,更多相关html5表单required属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- [HTML5]:所有表单元素的使用方式(附元素属性)
- HTML5:使用Autocomplete属性提高表单的交互性
- HTML5--表单新特性使用自定义错误提示消息validity属性
- HTML5--表单新特性使用自定义错误提示消息validity属性
- HTML5表单的基本属性和使用方法
- HTML5 表单 input标签 required 属性 自动提示
- HTML5表单必填项属性required="required"
- 0055 html5新增表单属性:required、placeholder、autofocus、autocomplete、multiple
- HTML5 Input 类型,HTML5 表单元素,HTML5 表单属性
- IE不支持HTML5表单属性placeholder的解决办法
- HTML5表单教程之Form新属性的应用
- 移动端使用HTML5表单增强体验
- HTML5新特性之智能表单: required="required"指示输入字段的值是必需的
- HTML基础之为什么要在表单控件中同时使用name和id属性?
- HTML5 的新的表单元素(datalist/keygen/output)使用介绍
- So Beautiful 旅程 ——HTML5表单相关元素和属性
- html5中的input新属性range使用记录
- 使用 jQuery Mobile 与 HTML5 开发 Web App(四) —— jQuery Mobile 表单上
- form表单提交target属性使用
- HTML5中meta属性的使用详解