经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
html5表单的required属性使用
来源:jb51  时间:2021/7/12 9:40:25  对本文有异议

描述

今天无意之中发现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('');">
  2.  

如何让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属性内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号