前端基础—自动验证

news2024/11/27 0:38:52

自动验证

在HTML5中,通过对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能。下面是在HTML5中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

required属性的主要目的是确保表单控件中的值已填写。在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素中必须输入内容。

2.pattern属性

pattern属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。例如下面所示,要求输入的内容必须为一个数字与3个大写字母。
<input pattern="[0-9][A-Z]{3}" name="mr" placeholder="输入内容:一个数字与三个大写字母。" />

3.min属性与max属性

min与max这两个属性是数值类型或日期类型的input元素的专用属性,它们限制了在input元素中输入的数值与日期的范围。图14.21所示为在Opera浏览器中max属性的表现形式。

4.step属性

step属性控制input元素中的值增加或减少时的增量。例如当你想让用户输入的值在0与100之间,但必须是5的倍数时,你可以指定step为5。

了解更多前端知识,可以点击链接和小编一起学习哟~icon-default.png?t=M85Bhttps://www.bilibili.com/video/BV1SG4y137am/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/83614.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

#4文献学习总结--能量优化动态计算卸载

文献&#xff1a;“Energy-optimal Dynamic Computation Offloading for Industrial IoT in Fog Computing” 通过将部分计算密集型任务从雾节点动态卸载到云服务器&#xff0c;可以在雾计算系统中进一步改善用户的计算体验。 能量最优动态计算卸载方案&#xff08;EDCO&#…

Spring中@Async注解的使用

一、应用场景 1、同步调用 通常&#xff0c;在Java中的方法调用都是同步调用&#xff0c;比如在A方法中调用了B方法&#xff0c;则在A调用B方法之后&#xff0c;必须等待B方法执行并返回后&#xff0c;A方法才可以继续往下执行。 这样容易出现的一个问题就是如果B方法执行时间…

如何避免“非正常专利申请”?!

近年来&#xff0c;专利数量多但质量不优的现象时而发生。对此&#xff0c;国家知识产权局开始严打非正常申请专利行为。而就在前不久&#xff0c;上海、甘肃等地也出台了相应的地方惩戒措施以打击非正常专利申请&#xff0c;这也反映出未来国家对于专利质量有着更高要求的趋势…

ubuntu 18.04 安装搜狗拼音输入法(没有坑)

本文参考&#xff1a;https://blog.csdn.net/weixin_44497198/article/details/126133691 最近在使用 ubuntu18.04 发现自带的中文输入法太难用了&#xff0c;于是想起装一个搜狗拼音输入法&#xff0c;但是按照搜狗官方的教程安装失败&#xff0c;安装成功了也是不稳定&#x…

钉钉机器人报警设置

钉钉机器人报警设置 1. 钉钉机器人相关设置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 2. 添加机器人 3. 选择自定义机器人 4. 选择一个安全标签 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 5. 添加完生成一个webhook…

小蓝本 第一本 《因式分解技巧》 第五章 十字相乘 笔记(第五天)

小蓝本 第一本 《因式分解技巧》 第五章 十字相乘 笔记&#xff08;第五天&#xff09;前言十字相乘研究对象类型普通二次三项式基本形式分解步骤注意二次齐次式基本形式分组步骤注意系数和为0的普通二次三项式习题5题目题解前言 今天的干货来了&#xff0c;十字相乘。 十字相…

【JS】事件基础

JavaScript事件基础事件的概述事件三要素常见的事件事件的调用在script标签中调用在元素中调用鼠标事件onclick事件onmouseover和onmouseoutonmousedown和onmouseup页面事件onloadonbeforeunloadthis其他事件事件的概述 事件操作是JavaScript的核心。 用户进行操作时&#xff0…

疫情在家用Python搞副业,也能月入10000+

下班副业实现经济自由的时候&#xff0c;你还在床上躺着&#xff0c;天天摆烂吗&#xff1f;这样的生活真的是你想要的吗&#xff1f; 疫情在家接一些Python相关的小单子&#xff0c;既能给自己练手&#xff0c;还能赚是真香 从零基础开始真的一台电脑和一部手机就可以✅ 一…

NC65 计算人员离退休的天数和日期(数据库 sql server)

最近公司需要人力资源部需要写一张报表&#xff0c;计算人员距离退休的天数和日期&#xff0c;现附上自己写是sql脚本&#xff08;仅供参考&#xff09;&#xff0c;如下&#xff1a; select a.pk_psndoc,--员工信息主键a.code …

程序员快速成长的核心原则

如何快速成长、持续成长、提升技术&#xff0c;是每一个程序员都绕不开的话题。 当你还在困惑职业发展方向时&#xff0c;别人已经找好了接单平台开始兼职&#xff1b;当你还在苦恼bug修不好时&#xff0c;别人已经可以承接整个软件外包项目了&#xff1b;当你还在思考怎么让技…

MongoDB 命令行操作

通过 MongoDB 数据库安装详细教程 安装完成了MongoDB&#xff0c;MySQL数据库是通过sql命令操作数据&#xff0c;而MongoDB是通过类Javascript函数的查询方式进行数据库的操作&#xff0c;在使用MongoDB来操作数据库之前先来简单的了解MongoDB操作注意&#xff1a; MongoDB数据…

使用线性光耦合器的模拟隔离

介绍 模拟隔离仍然广泛应用于电机驱动、功率监测等&#xff0c;其中应用通常使用廉价的模拟电压控制来进行速度、强度或其他调整。 HCNR201/200模拟光耦合器通常被添加到&#xff0c;用于隔离应用电路的前端模块中的模拟信号。光耦合器将放置在模拟输入和A/D转换器之间&#…

C++list

1. list的介绍及使用 1.1 list的介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其…

外包出去找工作被歧视,投几个简历都说介意外包,不考虑外包。

说起外包这个话题&#xff0c;一直是职场的热门话题。 关于外包&#xff0c;最多被人讨论的就是歧视方面的。比如&#xff0c;关于门禁权限方面的歧视、关于语言交流上的歧视、关于福利上的歧视等等。 01 外包被歧视的情况确实存在 网传有一腾讯外包员工在脉脉上吐槽自己遭受…

python--内置高阶函数、异常处理;模块与包以及python基础部分的总结

文章目录一、内置高阶函数二、异常处理异常处理机制抛出异常三、模块与包python基础部分的总结一、sort()与sorted()函数的区别二、深拷贝和浅拷贝、is与四、基础部分的脑图总括一、内置高阶函数 map()函数 reduce()函数 filter()函数 sorted()函数 #排序 二、异常处理 Indent…

java基础巩固-宇宙第一AiYWM:为了维持生计,测试篇预热【单元测试、性能测试、灰度发布与回滚】~整起

单元测试【就像买保险&#xff0c;希望自己不要用上】是重构的保护网&#xff1a;单元测试可以为重构提供信心&#xff0c;降低重构的成本。我们要像重视生产代码那样&#xff0c;重视单元测试【元测试&#xff08;Unit Testing&#xff09;是针对程序模块&#xff08;软件设计…

协同过滤CF

算法提出 如果让推荐系统领域的从业者选出业界影响力最大、应用最广泛的模型&#xff0c;那么笔者认为90%的从业者会首选协同过滤。1992年, Xerox的研究中心开发了一种基于协同过滤的邮件筛选系统&#xff0c;用以过滤一些用户不感兴趣的无用邮件。2003 年&#xff0c;Amazon …

MySQL数据表的基础知识

目录 一、增 二、查 a、全列查询 b、指定列查询 c、查询字段为表达式 d、别名查询 e、对查询结果进行去重 f、排序 ​g、条件查询 三、改 四、删 以下操作均以student表为基础&#xff1a; 一、增 insert into 表名 values(...); 例如&#xff1a;新增张三同学的…

举个栗子!Tableau 技巧(247):用震波图(Seismogram)查看数据变化

震波图&#xff08;Seismogram&#xff09;是一种像地震波或声波的图表&#xff0c;通常用于表达数据的变化。乍一看&#xff0c;它有点像 蝴蝶图&#xff08;旋风图&#xff09;&#xff0c;数据都分布在轴的零点两侧&#xff0c;但其实两者完全不同。 如下震波图&#xff0c…

Stm32旧版库函数6——ov2640 串口显示图像 串口中断 使用旧版库 模拟IIC

/******************************************************************************* // // 使用单片机STM32F100C8T6 8 // 晶振&#xff1a;8.00M // 编译环境 Keil uVision4 // 在3.3V的供电环境下&#xff0c;就能运行 // 波特率 115200 // 使用&#xff1a;STM32F100C…