html5自带表单验证-美化改造
神奇的代码
暂且叫做html5.css
/* === HTML5 validation styles === */
.myform select:required,
.myform input:required,
.myform textarea:required {
background: #fff url(../img/red_asterisk.png) no-repeat 99% center;
}
.myform select:required:valid,
.myform input:required:valid,
.myform textarea:required:valid {
background: #fff url(../img/valid.png) no-repeat 99% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.myform select:focus:invalid,
.myform input:focus:invalid,
.myform textarea:focus:invalid {
background: #fff url(../img/invalid.png) no-repeat 99% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
完整的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>申请电商开店</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- boot -->
<link type="text/css" rel="stylesheet" href="{sh::PUB}css/font-awesome.min.css">
<link rel="stylesheet" href="{sh::PUB}sui/css/sm.min.css">
<link rel="stylesheet" href="{sh::PUB}sui/css/sm-extend.min.css">
<link rel="stylesheet" href="{sh::PUB}plugin/html5/css/html5.css">
</head>
<body>
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left" href="{sh::U('OpenStore/index')}">
<span class="icon icon-left"></span>
返回
</a>
<h1 class='title'>申请电商开店</h1>
</header>
<div class="content">
<form id="reg-form" class="myform" action="" onsubmit="return checkForm();" method="post">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">手机号</div>
<div class="item-input">
<input name="UserName" id="UserName" type="text" placeholder="用于登录" pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input name="Password" id="Password" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('6~20字母数字或下划线');" oninput="setCustomValidity('')" onchange="checkPassword()">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-title label">确认密码</div>
<div class="item-input">
<input name="Repassword" id="Repassword" type="password" placeholder="确认密码" class="" required onchange="checkPassword()">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">身份证号</div>
<div class="item-input">
<input name="CardId" id="CardId" type="text" placeholder="输入身份证号" required pattern="^([0-9]){18}(x|X)?$" oninvalid="this.setCustomValidity('请输入合法的身份证号');" oninput="setCustomValidity('')">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">开户银行</div>
<div class="item-input">
<select name="BankTypeId" id="BankTypeId" required>
<option value="">==请选择==</option>
<option value="1">中国银行</option>
<option value="2">中国工商银行</option>
<option value="3">中国农业银行</option>
<option value="5">中国邮政储蓄银行</option>
<option value="6">交通银行</option>
<option value="7">招商银行</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">开户支行</div>
<div class="item-input">
<input type="text" name="BankPlace" id="BankPlace" placeholder="开户支行" required>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">开户名</div>
<div class="item-input">
<input name="AccountName" id="AccountName" type="text" placeholder="开户名" required>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">银行账号</div>
<div class="item-input">
<input name="Account" id="Account" type="text" placeholder="银行账号" required>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">省</div>
<div class="item-input">
<select name="ProvinceId" id="ProvinceId" required>
<option value="">==请选择==</option>
<volist name="Province" id="vo">
<option value="{sh:$key}">{sh:$vo}</option>
</volist>
<option>江苏省</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">市</div>
<div class="item-input">
<select name="CityId" id="CityId" required>
<option value="">==请选择==</option>
<option>宿迁市</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-gender"></i></div>
<div class="item-inner">
<div class="item-title label">县/区</div>
<div class="item-input">
<select name="CountyId" id="CountyId" required>
<option value="">==请选择==</option>
<option>宿城区</option>
</select>
</div>
</div>
</div>
</li>
<li class="align-top">
<div class="item-content">
<div class="item-media"><i class="icon icon-form-comment"></i></div>
<div class="item-inner">
<div class="item-title label">街道地址</div>
<div class="item-input">
<textarea name="StreatAddress" id="StreatAddress" placeholder="收货详细地址" required></textarea>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="{sh::U('Store/OpenStore/index')}" class="button button-big button-fill button-danger">取消</a></div>
<div class="col-50"><input type="submit" class="button button-big button-fill button-success" value="提交"></div>
</div>
</div>
</form>
</div>
<script src="{sh::PUB}js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="{sh::PUB}plugin/layer/layer.js" type="text/javascript"></script>
<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("");
}
// 验证表单
function checkForm() {
// ajax检测账号是否已存在
return false;
}
</script>
</body>
</html>
表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，因为前端验证是可以绕过的。
html5验证的几种类型：
1、valueMissing
目的：确保表单控件中的值已填写。
用法：在表单控件中将required特性设置为true。
示例：
<input type="text" name="myText" required>
详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。
2、typeMismatch
目的：保证控件值与预期类型相匹配(如numbe、email、URL等).
用法：指定表单控件的type特性值。
示例：
<input type="email" name="myEmail">
详细说明：特殊的表单控件类型不只是用来定制手机键盘， 如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则，比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。
3、patternMismatch
目的：根据表单控件上设置的格式规则验证输入是否为有效格式。
用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。
示例：
<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">
详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性 后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表 单控件中设置title特性以说明规则的作用。
4、tooLong
目的：避免输入值包含过多字符。
用法：在表单控件上设置maxLength特性。
示例：
<input type="text" name="limitedText" maxLength="140">
详细说明：如果输入值的长度超过maxLength， tooLong特性会返回true。虽然表单控件通常会在用户输入时，限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。
5、rangeUnderflow
目的：限制数值型控件的最小值。
用法：为表单控件设置min特性，并赋予允许的最小值。
示例：
<input type="range" name="ageCheck" min="18">
详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。
6、rangeOverflow
目的：限制数值型控件的最大值。
用法：为表单控件设置max特性，并赋予允许的最大值。
示例：
<input type="range" name="kidAgeCheck" max="12">
详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。
7、stepMismatch
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
示例：
<input type="range" name="confidenceLevel" min="0" max="100" step="5">
详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。
8、customError
目的：处理应用代码明确设置及计算产生的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：
passwordConfirmationField.setCustomValidity("Password values do not match.");
详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。
自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。
html5自带表单验证-美化改造的更多相关文章
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- html5自带表单验证
起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...
- 用html5自带表单验证 并且用ajax提交的解决方法(附例子)
用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...
- H5自带表单验证
HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- 表单验证—html5新特性表单验证
一.表单 <body> <section id="register"> <div><img src="images/logo.j ...
- HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
随机推荐
- opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用
opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用
- document.compatMode的CSS1compat
document.compatMode BackCompat:标准兼容模式关闭.浏览器宽度:document.body.clientWidth: CSS1Compat:标准兼容模式开启. 浏览器宽度: ...
- FireFox不支持InnerText的解决方法
innerText和InnerHTML是非常实用的一个属性,然而在FireFox中不支持此属性,可能是因为考虑到网页的安全性.这样一来为开发者带来了不少麻烦.FireFox中也提供了另外一个属性inn ...
- http中的KeepAlive
为什么要使用KeepAlive? 终极的原因就是需要加快客户端和服务端的访问请求速度.KeepAlive就是浏览器和服务端之间保持长连接,这个连接是可以复用的.当客户端发送一次请求,收到相应以后,第二 ...
- 【转】 设定linux 系统可用资源
getrlimit和setrlimit函数 每个进程都有一组资源限制,其中某一些可以用getrlimit和setrlimit函数查询和更改. #include #include int getrli ...
- insert into (select...WITH CHECK OPTION) values(...)
insert into (<subquery> WITH CHECK OPTION) values (...) 语法看起来很特殊,其实是insert进subquery的这张表里: 1. 只 ...
- WPF常用数据绑定控件集合
1.怎么用ListView控件把XML中的数据在界面上显示出来? <?xml version="1.0" encoding="utf-8" ?> & ...
- 深层次详解Exception
所有的异常类都继承自System.Exception类,当异常产生时,CLR将创建该异常类的实例对象,将从最底层依次寻找合适的异常类型,同时若存在catch语句时将会选择最合适的语句进行处理. cat ...
- linux安装软件命令
tar.bz2的解压: tar -jxvf FileName.tar.bz2 然后安装: cd FileName ./configure make make install rpm 包的安装: rpm ...
- 信息化的“五观”与“N为”
系统观:联系的总体的看 生产力工具观:人与工具关系 马克思政治经济学 辨证观:发展的看 技术观:第一生产力 改变生产生活(生存)方式 信息论观:“人”联网 控制论 工程观:群体合作的智力游戏论