H5——表单验证新特性，注册模态框！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用户注册表单页</title>
<style>
#form_content{
width:600px;
margin:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
margin-top:10px;
overflow:hidden;
}
#form_content .dc h3{
text-align:center;
}
#form_content b{
display:inline-block;
height:40px;
line-height: 40px;
margin-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
border-radius:2px;
margin-left:60px;
padding-left:10px;
}
.pc{
width:200px;
height:40px;
float:right;
line-height:40px;
text-align:center;
margin:0 20px 0;
background:#333;
color:#fff;
font-weight:bold;
border-radius:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
margin-left:144px;
}
.show_pass{
background:limegreen;
display:block;
}
.show_warn{
background:#e4393c;
display:block;
}
#audio_bground{
width:100%;
height:100%;
background:#afa;
position:absolute;
z-index:-10;
}
</style>
</head>
<body>
<!--input 标签新特性-->
<form>
<!--email属性-->
邮箱类型<input type="email"/><br/>
<!--tel属性-->
电话类型<input type="tel"/><br/>
<!--number属性-->
数字类型<input type="number"/><br/>
<!--date属性-->
日期类型<input type="date"/><br/>
<!--month属性-->
月份类型<input type="month"/><br/>
<!--week属性-->
周期类型<input type="week"/><br/>
<!--range属性-->
数字范围<input type="range" min="18" max="60"/><br/>
<!--search属性-->
搜素类型<input type="search"/><br/>
<!--color属性-->
颜色选择器<input type="color"/><br/>
<!--url属性-->
网址类型<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>用户注册页面</h3></div>
<div class="dc"><b>用户昵称</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">请输入用户名</p></div>
<div class="dc"><b>用户密码</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">请输入密码</p></div>
<div class="dc"><b>个人邮箱</b><input id="email" type="email" required/><p class="pc">清输入邮箱</p></div>
<div class="dc"><b>个人主页</b><input id="url" type="url" required/><p class="pc">请输入个人主页(可不填)</p></div>
<div class="dc"><b>联系电话</b><input id="tel" type="tel" required/><p class="pc">请输入联系电话</p></div>
<div class="dc"><b>你的年龄</b><input id="age" type="number" min="18" max="60" required/><p class="pc">请输入你的年龄</p></div>
<div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">请选择出生日期</p></div>
<div class="dc"><input id="sub" type="submit" value="提交注册"/></div>
</form>
</div>
<script>
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12数字或字母组成';
}
uname.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='用户名格式正确';
}
else if(this.validity.valueMissing) {
this.nextElementSibling.className = 'pc show_warn';
this.nextElementSibling.innerHTML = '用户名不能为空';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='用户名格式非法';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='6-12位数字/字母/英文符号组成';
}
upwd.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='密码格式正确';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='用户密码不能为空';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='密码格式非法';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的常用邮箱';
}
e_mail.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = '邮箱格式正确';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='邮箱不能为空';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='邮箱格式有误';
}
}
var url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的个人主页(选填)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = '网址格式正确';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='网址格式非法';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的联系电话';
}
uphone.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='电话号码格式正确';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='电话号码不能外空';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='电话号码格式非法';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='请输入你的年龄';
}
uage.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='你的年龄符合注册要求';
}else if(this.validity.rangeOverflow){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='你的年龄大于注册范围';
}else if(this.validity.rangeUnderflow){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='你的年龄小于注册范围'
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='年龄不能为空';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的出生日期';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='出生日期不能为空';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='已选择出生日期';
}
}
</script>
</body>
</html>
H5——表单验证新特性，注册模态框！的更多相关文章
- H5: 表单验证失败的提示语
前言 前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...
- h5表单验证的css和js方法
1.css3 提示只适用于高级浏览器: Chrome,Firefox,Safari,IE9+ valid.invalid.required的定义 代码如下: input:required, input ...
- Yii2 注册表单验证规则 手机注册时候使用短信验证码
public function rules() { return [ ['username', 'filter', 'filter' => 'trim'], ['username', 'requ ...
- H5自带表单验证
HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
- H5表单新特性
1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...
随机推荐
- 分享一个MySQL分库分表备份脚本（原）
分享一个MySQL分库备份脚本(原) 开发思路: 1.路径:规定备份到什么位置,把路径(先判断是否存在,不存在创建一个目录)先定义好,我的路径:/mysql/backup,每个备份用压缩提升效率,带上 ...
- 类型转换器(InitBinder 初始化绑定器)
单日期格式 导入jar包 创建FirstController.java @Controller public class FirstController { /** * @param binder * ...
- Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度
Matrix4x4 // 重置矩阵 ][]) { m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] ...
- ASP.NET跨平台最佳实践
前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java ...
- Visual Studio Code预览版Ver 0.3.0试用体验
当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...
- [转]： stm328种GPIO模式
[原创]:这段时间开始研究stm32,今天撸着一段代码一直追,追到了GPIO口模式的枚举类型这里,遂去网上查看这8种模式到底是什么,网上一查,看到了一个答案被很多博主转载或者原创,那我也就不重复废话了 ...
- 使用Newtonsoft.Json.dll(JSON.NET)动态解析JSON、.net 的json的序列化与反序列化（一）
在开发中,我非常喜欢动态语言和匿名对象带来的方便,JSON.NET具有动态序列化和反序列化任意JSON内容的能力,不必将它映射到具体的强类型对象,它可以处理不确定的类型(集合.字典.动态对象和匿名对象 ...
- [OAuth]基于DotNetOpenAuth实现Client Credentials Grant
Client Credentials Grant是指直接由Client向Authorization Server请求access token,无需用户(Resource Owner)的授权.比如我们提 ...
- 计算机程序的思维逻辑 (48) - 剖析ArrayDeque
前面我们介绍了队列Queue的两个实现类LinkedList和PriorityQueue,LinkedList还实现了双端队列接口Deque,Java容器类中还有一个双端队列的实现类ArrayDequ ...
- 计算机网络学习笔记--网络层之IP地址与子网
IPv4地址: 我们知道在网络层(TCP/IP体系结构的网际互联层),最重要的一个协议就是IP协议,现在正处于IPv4和IPv6的过渡时期,但目前来说,IPv4仍为主流,所以主要讲Ipv4. IP地址 ...