html5验证必填属性,html5表单的required属性使用

描述

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

定义和用法

required 属性是一个布尔属性

required 属性规定必需在提交之前填写输入字段。

如果使用该属性,则字段是必填(或必选)的。

注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

语法使用

用户名

密码

注意:

1:required和required="required"效果是一样的,只不过前者是简写

2:必须要用form标签把代码包裹起来才有效

3:点击的按钮必须要是submit类型,类型为button无效

效果

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

7cbb4650bb2ce259f339f5c9bf91cd6e.png

如何自定义提示文字

用户名

如何让required失效

1:把按钮类型变成button而不是submit

2:提交按钮添加formnovalidate属性

用户名

密码

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

用户名

密码

4,pattern属性 - 使用正则表达式验证

(1)不必使用^和$字符表示要匹配字段值得开头和结尾。

(2)只设置pattern的话,空值也会通过。如果不允许空,则还要加上required属性。

到此这篇关于html5表单的required属性使用的文章就介绍到这了,更多相关html5表单required属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 提供了一些新的表单验证规则,可以通过设置 input 元素的 type 属性或添加相应的属性使用。以下是一些常见的 HTML5 表单验证规则: 1. required 规则:表示该字段为必填项,如果该字段为空则无法提交表单。 2. email 规则:表示该字段必须是一个有效的电子邮件地址。 3. url 规则:表示该字段必须是一个有效的 URL 地址。 4. pattern 规则:表示该字段必须匹配指定的正则表达式。 5. min 和 max 规则:表示该字段的值必须在指定的最小值和最大值之间,适用于数字类型的表单项。 6. minlength 和 maxlength 规则:表示该字段的长度必须在指定的最小长度和最大长度之间,适用于文本类型的表单项。 7. number 规则:表示该字段必须是一个数字类型的值。 8. tel 规则:表示该字段必须是一个有效的电话号码。 9. date、time、datetime、week、month 规则:表示该字段必须是一个有效的日期或时间类型的值。 例如: ```html <form> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="18" max="60"><br> <label for="phone">电话:</label> <input type="tel" id="phone" name="phone" pattern="^\d{11}$"><br> <button type="submit">提交</button> </form> ``` 在这个例子,邮箱输入框设置了 required 规则,表示该字段为必填项;年龄输入框设置了 min 和 max 规则,表示年龄必须在 18 到 60 之间;电话输入框设置了 pattern 规则,表示该字段必须是一个 11 位数字的电话号码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值