html表单验证确认密码_简述html5的表单验证

html表单验证确认密码_简述html5的表单验证因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过jQueryValidate,但是我觉得引用jQueryValidate太麻烦了。我采用的表单验证不是使用框架来实现,而是直接使用html5的新特性1.实现一个简单的用户名长度验证我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法需求:用户名限制长度…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery Validate,但是我觉得引用 jQuery Validate 太麻烦了。

我采用的表单验证不是使用 框架来实现,而是直接使用 html5 的新特性

1. 实现一个简单的用户名长度验证

我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法

需求:用户名限制长度为3至5个字符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<input type="text" pattern=".{3,5}"> 用户名 <br>
		<input type="submit" value="提交">
	</form>
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

  • <input type="text" pattern=".{3,5}"> 用户名 <br>
    
  • 在需要验证的元素上添加 pattern元素就可了,验证方式为正则表达式

  • 当验证不通过时会自动提示 请与所请求的格式一致

  • 在这里插入图片描述

  • 如果需要添加自定义提示,只需要添加title元素即可

  • <input type="text" pattern=".{3,5}" title="用户名限制3至5个字符"> 用户名 <br>
    
  • 提示

  • 具体的验证格式还需要自己去定义…

2. 在添加pattern属性后,如果value没有值则不会验证

input时使用pattern正则验证表单输入的内容是否合法,但是有一个问题,就是当表单的值为空的时候,并不进行验证,直接提交了

需求:怎么实现非空验证

  • 在需要添加非空验证的元素上添加 required 属性

  • <input type="text" required> 用户名 <br>
    
  • 添加非空验证

简单的 html 表单验证就到这里了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/226830.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • VC++界面库[通俗易懂]

    VC++界面库[通俗易懂]好东西,果断收藏  刚开始用C++做界面的时候,根本不知道怎么用简陋的MFC控件做出比较美观的界面,后来就开始逐渐接触到BCG XtremeToolkitProv15.0.1,Skin++,等界面库,以及一些网友自己写的界面库,开始对于C++软件界面美化有了一点点的心得。不敢藏私,希望和一些新手朋友们分享交流。  一. 开源C++界面库

  • element-ui中表格获取当前行的索引index[通俗易懂]

    element-ui中表格获取当前行的索引index[通俗易懂]前言弄文件上传时,需要对上传列表的文件进行一定的操作,例如暂停/取消等等,因为我是使用element-ui中表格展示上传文件列表的,这时的操作却需要使用到当前行的索引下,如何获取索引就是我接下来要做的工作了:获取当前行的索引index使用scope.$index,scope.row即可实现获取索引<el-table-columnlabel=”排序”min-width=”100″><templateslot-scope=”scope”>{{sco

  • 修改浏览器设置为cookie怎么弄_删除浏览器cookie

    修改浏览器设置为cookie怎么弄_删除浏览器cookie怎么设置cookie,怎么设置cookie以及删除cookie和cookie详解注意:expires使用GMT或UTC格式的时间,我这里没有指定路径(path)和域(domain),当没有指定路

  • java 容器类_java容器排序

    java 容器类_java容器排序Java的容器在Java中,我们想要保存对象可以使用很多种手段。最简单的就是数组。但是数组具有固定的尺寸,而通常来说,程序总是在运行时根据条件来创建对象,我们无法预知将要创建对象的个数以及类型,所以Java推出了容器类来解决这一问题。Java容器的基本概念Java容器类库是用来保存对象的,他有两种不同的概念:Collection,独立元素的序列,这些元素都服从一条或多条规则。Lis…

  • protel99se精彩教程[通俗易懂]

    protel99se精彩教程[通俗易懂]网上盛行的那个protel99se精彩教程中,PCB通用封装在哪?

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号