HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时，必须使用
autocomplete="on" 自动补全功能
novalidate 不验证
<form enctype="multipart/form-data" novalidate autocomplete="on"></form>
placeholder
required 必填
autofocus 默认聚焦
pattern 正则验证
<input type="text" name="gonghao" required autofocus placeholder="请输入工号" pattern="^\d{5}[imooc]$">
dataList对选择框的记忆
list记忆内容
<input type="text" list="tips">
<dataList id="tips">
<option value="erwerewr"></option>
<option value="erwerew2r"></option>
<option value="erwerew2r"></option>
<option value="erwerewr"></option>
</dataList>
html5约束验证API
id.validity获取验证约束
console.log(username.validity);
如果输入值长度大于要求的长度，则截取要求的长度部分
<input type="number" id="numbers" oninput="checkLength(this,5)" step="0.01" />
function checkLength(obj, length) {
if (obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
valueMissing => required
typeMismatch => HTML类型，如email
rangeUnderflow => min
<input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
-----------------------
function checkit(obj){
console.log(obj.validity);
var it = obj.validity;
if (true===it.valueMissing) {
obj.setCustomValidity("不能为空");
}else{
if (true===it.patternMismatch) {
obj.setCustomValidity("必须是4个数字");
}else{
obj.setCustomValidity("");
}
}
}
checkValidity()满足约束返回true，否则false
if (username.checkValidity()) {
alert("用户名符合");
} else {
alert("不符合");
}
自带验证美化
:required
:optional
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
max-width:400px;
margin:20px auto;
}
input,select,textarea{
width: 240px;
margin:10px 0;
border:1px solid #999;
padding: .5em 1em;
}
label{
color:#999;
margin-left: 10px;
}
input:required,textarea:required{
border-right:3px solid #aa0088;
}
input:optional,select:optional{
border-right:3px solid #999;
}
input:required +label::after{
content: "（必填）"
}
input:optional +label::after{
content: "（选填）"
}
input:focus,select:focus,textarea:focus{
outline:0;
}
input:required:focus,textarea:required:focus{
box-shadow: 0 0 3px 1px #aa0088;
}
input:optional:focus,select:required:focus{
box-shadow: 0 0 3px 1px #999;
}
input[type="submit"]{
background-color: #cc00aa;
border: 2px solid #aa0088;
padding:10px 0;
color:#fff;
}
input[type="submit"]:hover{
background-color:#aa0088;
}
</style>
</head>
<body>
<!-- <div class="contenteditable"></div> -->
<div class="container">
<form action="#">
<input type="name" required><label>名称</label>
<input type="email" required><label>邮箱</label>
<input type="tel"><label>手机</label>
<input type="url"><label>网址</label>
<select name="" id="">
<option value="">非必选项一</option>
<option value="">非必选项二</option>
<option value="">非必选项三</option>
<option value="">非必选项四</option>
</select>
<textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required></textarea>
<input type="submit" value="提交表单">
</form>
</div>
</body>
</html>
:valid
:invalid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS表单验证美化（invalid和valid）应用案例</title>
<style>
.container{
margin:100px;
position:relative;
}
input{
border: 1px solid #999;
outline:0;
width:140px;
height:30px;
line-height:30px;text-indent:36px;transition: all .3s;
border-radius:5px;
}
span.title{
position:absolute;
line-height:30px;
height: 30px;
left:2px;
top:2px;
transition:all .3s;
}
input:focus,input:hover{
text-indent:2px;
}
input:focus+span.title,input:hover+span.title{
transform:translateX(-120%)
}
input:valid ~label::after{
content: "你输入正确！"
}
input:invalid ~label::after{
content: "你邮箱错误！"
}
input:valid{
border:1px solid green;
}
input:invalid{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<input id="mail" type="email" required placeholder="输入邮箱">
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>
oninvalid
oninput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html5表单美化综合案例</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<style>
.onelist {
margin: 10px 0 5px 12px;
} .onelist label {
width: 80px;
display: inline-block
} .onelist input,
.onelist select {
height: 25px;
line-height: 25px;
width: 220px;
border-radius: 3px;
border: 1px solid #e2e2e2;
} .onelist input[type="submit"] {
width: 150px;
height: 30px;
line-height: 30px;
} select:required,
input:required,
textarea:required {
background: #fff url(../img/star.jpg) no-repeat 99% center;
} select:required:valid,
input:required:valid,
textarea:required:valid {
background: #fff url(../img/right.png) no-repeat 99% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
} select:focus:invalid,
input:focus:invalid,
textarea:focus:invalid {
background: #fff url(../img/error.png) no-repeat 99% center;
box-shadow: 0 0 5px red;
border-color: red;
outline: red solid 1px;
}
</style> <body>
<form class="myform" onsubmit="return checkForm();" method="post">
<div class="onelist">
<label for="UserName">手机号</label>
<input name="UserName" id="UserName" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')">
</div>
<div class="onelist">
<label for="Password">密码</label>
<input name="Password" id="Password" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('请输入正确密码');" oninput="setCustomValidity('')" onchange="checkPassword()">
</div>
<div class="onelist">
<label for="Repassword">确认密码</label>
<input name="Repassword" id="Repassword" type="password" placeholder="确认密码" class="" required onchange="checkPassword()">
</div>
<div class="onelist">
<label for="Repassword">了解方式</label>
<select name="konw" required>
<option value="">==请选择==</option>
<option value="1">搜索引擎</option>
<option value="2">朋友圈</option>
<option value="3">朋友推广</option>
<option value="4">广告投放</option>
</select>
</div>
<div class="onelist">
<input type="submit" value="提交">
</div>
</form>
<script type="text/javascript">
function checkPassword() {
var pass1 = document.getElementById("Password");
var pass2 = document.getElementById("Repassword"); if (pass1.value != pass2.value)
// 设置自定义验证约束提示信息
pass2.setCustomValidity("两次输入的密码不匹配");
else
pass2.setCustomValidity("");
}
</script>
</body>
</html>
默认气泡修改
event.preventDefault(); 阻止默认气泡
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>表单验证默认样式修改</title>
</head>
<style>
.oneline{line-height: 1.5;margin:10px auto;}
.oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
.oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
.oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
.error-message{color:red; font-size:12px;text-indent:108px;}
</style> <body>
<form id="forms">
<div class="oneline">
<label for="name">用户名:</label>
<input id="name" name="name" class="sinput" required>
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" name="email" class="sinput" type="email" required>
</div>
<div class="oneline">
<input type="submit" value="提交" id="thesubmit">
</div>
</form>
<script>
function replaceValidationUI(form) { form.addEventListener("invalid", function(event) {
event.preventDefault();
}, true); form.addEventListener("submit", function(event) {
if (!this.checkValidity()) {
event.preventDefault();
}
}, true);
var submitButton = document.getElementById("thesubmit");
submitButton.addEventListener("click", function(event) {
var inValidityField = form.querySelectorAll(":invalid"),
errorMessage = form.querySelectorAll(".error-message"),
parent; for (var i = 0; i < errorMessage.length; i++) {
errorMessage[i].parentNode.removeChild(errorMessage[i]);
}
for (var i = 0; i < inValidityField.length; i++) {
parent = inValidityField[i].parentNode;
parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>")
}
if (inValidityField.length > 0) {
inValidityField[0].focus();
}
})
}
var form = document.getElementById("forms");
replaceValidationUI(form);
</script>
</body>
</html>
HTML5表单验证（4个实用的表单美化案例）的更多相关文章
- laravel基础课程---14、表单验证（lavarel如何进行表单验证）
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...
- ElementUI表单验证攻略：解决表单项启用和禁用验证的切换，以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件 简单实用方法
实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...
- HTML5 Web Form 新增属性和表单验证
<form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...
- js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
- AngularJS复习------表单验证
在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...
- js常用正则表达式表单验证代码
方法一: var re=/正则表达式/; re.test($("txtid").val()) 方法二: $("txtid").val.match(/正则 ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- spring+thymeleaf实现表单验证数据双向绑定
前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
- JQuery制作网页——表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
随机推荐
- 【WPF学习】第四十一章 变换
通过使用变换(transform),许多绘图任务将更趋简单:变换是通过不加通告地切换形状或元素使用的坐标系统来改变形状或元素绘制方式的对象.在WPF中,变换由继承自System.Windows.Med ...
- 《Python学习手册 第五版》 -第11章 赋值、表达式和打印
上一章对Python的语句和语法已经进行了基本的说明,接下来就是每个章节的详细说明,本章的主要内容就是标题中涵盖的三点:赋值语句.表达式语句.打印语句 本章重点内容如下: 1.赋值语句 1)赋值语句的 ...
- 第3章 JDK并发包（三）
3.2 线程复用:线程池 一种最为简单的线程创建和回收的方法类似如下代码: new Thread(new Runnable() { @Override public void run() { // d ...
- Go语言实现：【剑指offer】把字符串转换成整数
该题目来源于牛客网<剑指offer>专题. 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 输入描述: 输入一个字符串,包括数字字母符号,可以为空. 输出描述: 如果是合 ...
- 移植freertos到stm32 f103 的基本流程和总结
为什么要在stm32 f103上面移植freertos stm32 f103 以他的全面的文档,亲民的价格,强大的功能.成为无数微设备的方案首选.在市场上有极大的使用量.市场占有率也是非常的高.f ...
- 「硬核干货」总结IDEA开发的26个常用设置
前言 程序员对待IDE都是虔诚的,经常因为谁是最好的IDE而在江湖上掀起波澜,曾经我也是. 后来我遇到了IDEA,从此是它,余生都是它. IDEA 毫无疑问是目前最强大的Java开发工具了,但是大部分 ...
- one-hot编码（pytorch实现）
n = 5 #类别数 indices = torch.randint(0, n, size=(15,15)) #生成数组元素0~5的二维数组(15*15) one_hot = torch.nn.fun ...
- Flink系统之Table API 和 SQL
Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...
- 某oa系统的审计
title: 某oa系统的审计 date: 2018-03-07 17:18:16 tags: --- 信呼OA 闲着没事,java学累了来整理下以前审的一个觉得很有意思的cms,这个作者写的比较灵活 ...
- 《C# GDI+ 破境之道》：第一境 GDI+基础 —— 第三节：画圆形
有了上一节画矩形的基础,画圆形就不要太轻松+EZ:)所以,本节在画边线及填充上,就不做过多的讲解了,关注一下画“随机椭圆”.“正圆”.“路径填充”的具体实现就好.与画矩形相比较,画椭圆与之完全一致,没 ...