HTML 表单和验证
HTML5表单验证
本笔记参考b站视频总结,如有侵权请联系我。视频地址:https://www.bilibili.com/video/BV16K4y1Z7Gb?p=1&vd_source=dfcb8e4f04721f3ff1d38386942aa58e
一、HTML5基本表单验证特性介绍
必填:required。写在input上。
鼠标聚焦:
刷新时聚焦:autofocus。写在input上。
点击提示文字,聚焦到输入框:标题和input
<!-- 方法一:使用label标签包裹全部 --> <label>工号:<input type="text" name="工号" placeholder="请输入工号"> </label><!-- 方法二:使用for和id --> <label for="jobNumber">工号:</label> <input type="text" name="工号" placeholder="请输入工号" id="jobNumber">
表单不验证,解除required等:
- novalidate,写在form上。
- formnovalidate,写在input上。
表达验证:pattern=“正则表达式 ”
- 正则表达式学习推荐:https://deerchao.cn/tutorials/regex/regex.htm
历史记录联想:autocomplete=“on/off”
表单下拉提示框:注意list="province"和id=“province”
<input type="text" list="province"> <dataList id="province"><option value="湖北省"></option><option value="湖南省"></option><option value="安徽省"></option><option value="江苏省"></option> </dataList>
search伪类元素美化
search在谷歌浏览器中自带叉叉图标,点击清除所有文本内容
修改图标样式,不推荐在移动端使用
<input type="search" name="search" id="search">
<style> input[type="search"]::-webkit-search-cancel-button {/* 不显示图标 */-webkit-appearance: none;/* 伪类元素的美化,虽然不好看,意思get到就行 */height: 15px;width: 15px;background-color: red; } </style>
number表单
设置最大长度,无法使用maxlength等,以下使用js方法
<input type="number" id="number" oninput="checkLength(this,5)">
<script> function checkLength(obj, length) {if (obj.value > length) {obj.value = obj.value.substr(0, length);} } </script>
设置步长:点击按钮增减10
<input type="number" id="number" step="10">
提交表单时,设置小数:step=“0.01”,保留两位小数
<input type="number" value="2.56" id="number" step="0.01">
去掉数字表单上下箭头:伪类元素
<style>input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;} </style>
二、HTML5约束验证API
1. validity
2. checkValidity()方法:全部约束条件满足,返回true,否则返回false。
是否满足邮箱格式,输出”邮箱地址正确“
<input type="email" name="email" id="emails" value="12@qq.com">
<script>if (emails.checkValidity()) {console.log("邮箱地址正确");} else {console.log("邮箱地址错误");} </script>
必填项不填写,输出:”不符合“
<input type="text" id="username" required value="">
<script>if (username.checkValidity()) {console.log("符合");} else {console.log("不符合");} </script>
#####3. setCustomValidity()方法:设置自定义验证信息,用于即将实施与验证的约束来覆盖预定义的信息
小案例:两个条件,首先这是一个必填项required,其次必须是四个数字,pattern给了约束
<form><input type="text" required pattern="^\d{4}$" placeholder="请输入代码" oninput="check(this)"><input type="submit" value="验证">
</form>
当我们验证时,浏览器会有预定义提示信息,如果我们需要改变验证信息,则使用setCustomValidity()方法。
首先给表单一个输入时的函数,与上述的validity的两个属性相结合完成这个函数,分别是valueMissing属性和patternMismatch属性
<script>function check(obj) {console.log(obj.validity);var it = obj.validity;if (it.valueMissing === true) {obj.setCustomValidity("这是必填字段");} else {if (it.patternMismatch === true) {obj.setCustomValidity("请输入4个数字");} else {obj.setCustomValidity("输入正确");}}}</script>
三、HTML5自带验证美化
- 表单必填或选填设置样式
input:required {background-color: antiquewhite;
}
select:optional {background-color: indianred;
}
- input下的label。::after——在选定的元素的后面插入内容
<input type="name" required><label for="">name:</label></input>
input:required+label::after {content: "(必填)";
}
元素获取焦点时,输入框的样式(高亮等样式)
取消表单的高亮显示
input:focus {outline: 0; }
设置选填的表单的输入框样式
input:optional:focus {box-shadow: 0 0 3px 1px #aa0088; }
submit按钮被鼠标触摸时改变样式
input[type="submit"]:hover {background-color: salmon; }
输入框和标题动画及验证
<div class="container"><input type="email" id="mail" required placeholder="输入邮箱"><span class="title">邮箱</span><label for="mail"></label> </div>
- 利用子绝父相设置标题位置,鼠标获取焦点或者经过表单时,设置动画样式。代码2~30行
- 利用表单验证,判断输入内容是否符合邮箱格式,显示相应提示信息和边框样式。代码32-43行
- 小知识点:
① 兄弟选择器(+ 和 ~)学习资料:https://blog.csdn.net/lucky__peng/article/details/124225049
②line-height带单位与不带单位的区别:https://cdn.modb.pro/db/399952
<style>.container {margin: 100px;position: relative;}input {outline: 0;border: 1px solid gray;width: 140px;height: 30px;line-height: 30px;text-indent: 36px;border-radius: 5px;}.title {position: absolute;line-height: 30px;height: 30px;left: 2px;top: 2px;transition: all .3;}input:focus,input:hover {text-indent: 2px;}input:focus+.title,input:hover+.title {transform: translateX(-120%);}input:valid~label::after {content: "邮箱格式正确";}input:invalid~label::after {content: "邮箱格式错误";}input:valid {border: 2px solid green;}input:invalid {border: 2px solid red;}</style>
HTML 表单和验证相关推荐
- 在ASP.NET中如何用C#.NET实现基于表单的验证
这篇文章引用到了Microsoft .NET类库中的以下名空间: System.Data.SqlClient System.Web.Security ------------------------- ...
- 新工具:表单/Cookie 验证网站爬网设置工具
在今年3月份的blog里面,我曾经说过SharePoint Team将会发布一个补丁来让SharePoint Server 2007的搜索引擎支持对基于表单/Cookie验证的网站进行爬网.今天,Sh ...
- Angualr6表单提交验证并跳转
在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...
- php 自动验证表单类,thinkPHP 表单自动验证功能
昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对 ...
- golang表单及验证支持
在Web开发中对于这样的一个流程可能很眼熟: 打开一个网页显示出表单. 用户填写并提交了表单. 如果用户提交了一些无效的信息,或者可能漏掉了一个必填项,表单将会连同用户的数据和错误问题的描述信息返回. ...
- [转]在ASP.NET中如何用C#.NET实现基于表单的验证(二)
(五)创建Logon.aspx页面 1.在已创建好的项目里创建一个新的Web 窗体,名为Logon.aspx. 2.在编辑器里打开Logon.aspx,切换到HTML视图. 3.复制下面代码,然后在编 ...
- php中表单的非空验证,Javascript的表单与验证-非空验证_javascript技巧
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
- 前端学习(1908)vue之电商管理系统电商系统之渲染修改用户的表单预先验证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- javascript 校验 非空_Javascript的表单与验证-非空验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
最新文章
- Linux设置root默认密码
- regedit start mysql_MySQL安装完成配置的时候start service报错
- GUI可视化利器,让实时数据可视化so easy
- 程序员上帝视角解读“旅行青蛙”,你的呱真的在旅行嘛?
- mall整合SpringBoot+MyBatis搭建基本骨架
- 世界上最狠最毒的动物是什么?
- C++之编写dll库
- C#:System.Data.SQLite数据库介绍
- win10连Android机,Windows10电脑可以和安卓手机无缝连接使用了,实用性干翻Mac-win10手机...
- Auto CAD 2022安装教程【64位】
- 电脑键盘部分按键失灵_笔记本键盘失灵怎么办,电脑键盘失灵-中关村在线
- 帝国cms ajax,jquery.ajax制作帝国cms6.6快速登录插件
- 怎么有python画五角星_Python的画五角星
- android 信息添加附件功能,网易邮箱Android新版 添加附件可直接预览
- 台灯照度均匀度多少最好?2022最新护眼灯照度标准值
- 微风:什么是UI设计?
- halcon编程入门七——halco算子大全
- 图像超分算法小合集二:FSRCNN、DRCN、RDN、EDSR
- 012 相关性与线性表示总结;向量组的秩、向量组等价
- ACM学习历程—BestCoder 2015百度之星资格赛1002 列变位法解密(vector容器)