HTML 表单和验证
必填:required。写在input上。鼠标聚焦:刷新时聚焦:autofocus。写在input上。点击提示文字,聚焦到输入框:标题和input表单不验证,解除required等:表达验证:pattern=“正则表达式 ”历史记录联想:autocomplete=“on/off”表单下拉提示框:注意list="province"和id=“province”search伪类元素美化number表单设
HTML5表单验证
本笔记参考b站视频总结,如有侵权请联系我。视频地址:https://www.bilibili.com/video/BV16K4y1Z7Gb?p=1&vd_source=dfcb8e4f04721f3ff1d38386942aa58e
一、HTML5基本表单验证特性介绍
-
必填:required。写在input上。
-
鼠标聚焦:
-
刷新时聚焦:autofocus。写在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>
更多推荐
所有评论(0)