77百科网
当前位置: 首页 生活百科

html表单自动验证(HTML5表单自动验证)

时间:2023-06-16 作者: 小编 阅读量: 4 栏目名: 生活百科

在html5中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能,接下来我们来说1下自动验证。在html5中,通过对元素使用属性的方法,可以实现在表单提交时履行自动验证的功能,在履行代码后,将在表单提交时自动验证输入的内容是不是为数字,如果验证通不过,将显示毛病信息文字。在提交时,如果元素中内容为空白。

在html5 中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能,接下来我们来说1下自动验证。

在html5中,通过对元素使用属性的方法,可以实现在表单提交时履行自动验证的功能,在履行代码后,将在表单提交时自动验证输入的内容是不是为数字,如果验证通不过,将显示毛病信息文字。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF⑻"><title>表单验证示例</title></head><body><form action="#" method="post"><input type="text" name="text" required pattern="^\w.*$"><input type="submit" value="提交"></form></body></html>

接下来我们来看1下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

html5 中新增的required属性可以利用在大多数输入元素上(除隐藏元素,图片元素按钮上)。在提交时,如果元素中内容为空白。则不允许提交,同时在阅读器中显示信息提示文字,提示用户这个元素中必须输入内容,效果如图

2.pattern属性之条件到的新增的input元素,比如email,number,URL等,要求输入内容符合1定的格式,对input元素使用pattern属性,并且将属性值设置为某个格式的正则表达式,在提交时会检查其内容是不是符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在阅读器中显示信息提示文字,提交输入的内容必须符合给定格式,代码以下,要求输入内容为1个数字与3个大写字母:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF⑻"><title>表单验证示例</title></head><body><form action="#" method="post">请输入指定内容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="输入:1个数字3个大写字母"><input type="submit" value="提交"></form></body></html>

履行效果以下:

3.min属性与max属性

min与max这两个属性是日期类型或数值类型的input元素的专用属性,他们限制了在input元素中输入的数值与日期的范围。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF⑻"><title>表单验证示例</title></head><body><form action="#" method="post">请输入数值:<input type="number" name="point" min="0" max="100" /><input type="submit" value="提交"></form></body></html>

履行效果以下:

4.step属性

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF⑻"><title>表单验证示例</title></head><body><form action="#" method="get"><input type="number" name="point" step="5" /><input type="submit" /></form></body></html>

效果以下:

原文:http://www.wfuyu.com/htmlcss/27520.html

    推荐阅读
  • 出家的条件(有什么具体的要求)

    接下来我们就一起去了解一下吧!出家的条件问清楚自己为什么要出家,想清楚自己出家的原因。要想出家需要有父母或者自己监护人的书面同意书,没有的话是不能出家的。要想出家身上不能有传染性疾病,比如艾滋病,皮肤病等。出家意味着清净,想要出家身上不能有债务问题,也不能做过违反国家法律的事情。

  • 人类真实年龄(人类的年龄到底有多大)

    随着发现的不断深入,外国学者却依据“爪哇猿人”的化石推测出来有100多万年的历史。后来,随着东非地区坦桑尼亚“东非人”与“能人”化石的发现,学者们又发现,认为人类的诞生已有200多万年的历史,甚至有些学者说年份更久远,等等。这说明东非一代300万~400万年前就已经有了人类。如有侵犯版权,请联系删除人类的年龄已经不是200万到300万年,而是300万年之前或者更长。至于提前多少,目前尚难定论。

  • 浅水鱼的正确钓法(几种常见鱼的习性和钓法)

    自然水域中的青鱼,常集聚于江河、湖、库的深浅结合部。鳙鱼的食性与鲢鱼不同,它以水中的浮游动物,如轮虫、枝角、桡足类为主要食物,兼食多种浮游生物藻类。活动于水的中上层,鳙鱼对素食气味的喜爱和白鲢比较接近,喜酸臭。

  • iPhone11跑分多少

    iPhone11跑分为456655分,跑分显示屏幕解析度为1792×828、搭载iOS13、A13Bionic芯片与GPU、4GBRAM存储。iPhone11是iPhone公司发布的一款手机,于2019年9月11日发布。采用阳极氧化铝和玻璃设计,搭载A13Bionic芯片,超广角相机支持2倍光学变焦。

  • ai键是什么(ai键是干什么的)

    2、AI按键的作用:长按AI按键,将打开Jovi语音助手;3、短按AI按键,可进入设置--Jovi--智慧按键中,选择开启:智慧识图、Jovi收藏、游戏空间、语音助手、或无后点击“长按唤醒方式”。

  • 既好用又便宜的脱毛仪(一天3.9的永久脱毛仪)

    .偶然逛看给我推荐了这个脱毛仪,就点进去看了.一直就很想买个脱毛仪,之前看的都要1500-2000,感觉还是有点贵~~没想到这款也是蓝宝石配置的只要1000左右,颜值也很高,瞬间心动了…….然后就去做了一下功课nextbeauty是做脱毛仪很有专业的一个品牌,在业内口碑还是蛮高的!

  • 冬天冷水泡脚的好处与坏处(冬天泡脚好处不少)

    大部分人是没有副作用的,而且还很健康,冬天泡泡脚,全身都暖和,睡眠更香甜,而且对脚的卫生健康有好处,可以减少脚臭的困扰。还有如果是适合泡脚的人群,长期使用艾叶泡脚不会有明显的副作用,除了清理艾叶比较麻烦。健康无小事,知道多一点,健康多一点,欢迎关注爱跑步的小医生。

  • 艾薇儿专辑有什么(最后一张专辑叫什么)

    第一张《LetGo》发行日期:2002年6月4日,全球销量:1千8百万,我来为大家科普一下关于艾薇儿专辑有什么?下面希望有你要的答案,我们一起来看看吧!艾薇儿专辑有什么第一张《LetGo》。发行日期:2004年5月25日,全世界销量:1千万。发行日期:2007年4月17日,全世界销量:已经超过700万张第四张《GoodbyeLullaby》。发行时间:2011年03月08日,首日销量过千万。

  • 洗衣机波轮不转怎么回事?(快来看看吧)

    我们一起去了解并探讨一下这个问题吧!洗衣机波轮不转怎么回事开机注水至设定水位后,注水停止,但波轮正、反向均不转动。三角带松脱→调紧或更换三角带。大带轮松脱或连接处损坏→更换或检修大带轮。行星轮损坏→换离合器。电子程控器无输出→检修或更换电子程控器。电容损坏→更换电容。