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 ...

随机推荐

Oracle：一个用户操作多个表空间中表的问题（转）
原文地址:http://blog.csdn.net/shmiloy001/article/details/6287317 首先,授权给指定用户. 一个用户的默认表空间只能有一个,但是你可以试下用下面的 ...
T-SQL字符串相加之后被截断的那点事
本文出处:http://www.cnblogs.com/wy123/p/6217772.html 字符串自身相加, 虽然赋值给了varchar(max)类型的变量,在某些特殊情况下仍然会被“截断”,这 ...
MongoDB学习笔记五—查询上
数据准备 { , "goods_name" : "KD876", "createTime" : ISODate("2016-12- ...
免费SSL证书之Let’s Encrypt申请与部署(Windows Nginx)
我着着皇帝的新衣,但是你看不见有一颗愿意等待的心,说明你对未来充满希望.有一颗充满希望的心,那么等待又算什么.人就是在等待与希望中度过,我们永远要对未来充满信心! 读在最前面: 1.本文案例为 ...
[css]实现垂直居中水平居中的几种方式
转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...
执行git push出现"Everything up-to-date"
在github上git clone一个项目,在里面创建一个目录,然后git push的时候,出现报错"Everything up-to-date" 原因:1)没有git add . ...
搭建TFS 2015 Build Agent环境(一)
Download the build agent Downloading the build agent is really simple. Navigate to your TFS control ...
mono for android Listview 里面按钮 view Button click 注册方法并且传值给其他Activity 主要是context
需求:为Listview的Item里面的按钮Button添加一个事件,单击按钮时通过事件传值并跳转到新的页面. 环境:mono 效果: 布局代码主布局 <?xml version=" ...
常用js功能函数集合
1.获取随机时间戳 function uniqueId(){ var a=Math.random,b=parseInt; return Number(new Date( ...
Nginx配置详解
序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也 ...

H5——表单验证新特性，注册模态框！

H5——表单验证新特性，注册模态框！的更多相关文章

随机推荐

热门专题