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

随机推荐

grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读快速入门指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
分享阿里云推荐码 IC1L2A，购买服务器可以直接打9折，另附阿里云服务器部署ASP.NET MVC5关键教程
阿里云推荐码为:IC1L2A 阿里云还是不错滴. 以windows server 2008 R2为例,介绍如何从全新的服务器部署MVC5 站点. 新购买的阿里云服务器是没有IIS的,要安装IIS: 控 ...
虚拟机体验之 VirtualBox 篇 —— 性能强大的经典架构
前两篇体验了 QEMU 和经过 KVM 加速的 QEMU,并体验了第三方虚拟机管理工具 virt-manager,让我们见识了开源社区的强大和开源虚拟机软件的高质量和高性能.这一篇,我来剖析一下 Vi ...
WCF : 修复 Security settings for this service require Windows Authentication but it is not enabled for the IIS application that hosts this service 问题
摘要 : 最近遇到了一个奇怪的 WCF 安全配置问题, WCF Service 上面配置了Windows Authentication. IIS上也启用了 Windows Authentication ...
mvc4 自定义HtmlHelper
好久没写博客了,最近只看博客不写的习惯很不好啊. 好了,最近的项目中大量的用到了表单,很多表单有特殊的编写,但是在该项目中又有很多重复的地方,这个时候若能封装成htmlhelper将大大降低工作量的. ...
wget 显示"英国中部时间",去掉烦人的刷屏显示
wget下载文件显示多行,进度条后面显示英国中部时间,非常让人郁闷. 本来英文是eta(Estimated Time of Arrival 预计到达时间),翻译错了,干脆去掉好了. 先要有两个个工具 ...
angular view之间的数据传递
之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下.在angular 传递数据通俗的讲叫做广播 ,在一些文章中,也叫做事件的发布与订阅,在angul ...
使用Red Gate Sql Compare 数据库同步工具进行SQL Server的两个数据库的结构比较、同步
将测试版的项目同步(部署)到正式版的时候,两个数据库的结构比较与同步时,如果修改数据库的时候没有记录好修改了那些表,很难将两个数据库进行同步 RedGate Sql Compare使用简介说明: 1. ...
JVM学习（3）——总结Java内存模型
俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: 为什么学习Java的内存模式缓存一致性问题什么是内存模型 JMM(Java Memory Model)简 ...
DG gap sequence修复一例
环境:Oracle 11.2.0.4 DG 故障现象: 客户在备库告警日志中发现GAP sequence提示信息: Mon Nov 21 09:53:29 2016 Media Recovery Wa ...

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

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

随机推荐

热门专题