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

随机推荐

height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
RabbitMQ基础知识
RabbitMQ基础知识一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
Atitit 知识管理的重要方法数据来源，聚合，分类，备份，发布搜索
Atitit 知识管理的重要方法数据来源,聚合,分类,备份,发布搜索 1.1. Rss 简易信息聚合(也叫聚合内容 Really Simple Syndication1 1.1. Rss 简易信息 ...
Java发送Http请求并获取状态码
通过Java发送url请求,查看该url是否有效,这时我们可以通过获取状态码来判断. try { URL u = new URL("http://10.1.2.8:8080/fqz/page ...
游戏服务器菜鸟之C#初探二游戏服务
经过短时间的折腾,为了解决上述问题,我对游戏进行一些简单的重构,以便能解决当前的瓶颈添加了缓存服务器进行处理一些及时数据和配置数据,来缓解数据库的压力和IO的压力: 只能说解决当前的暂时性问题,但是 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（20）-权限管理系统-根据权限获取菜单
系列目录不知不觉到20讲,真是漫长的日子,可惜最近工作挺忙,要不可以有更多的时间来更新,多谢大家的一路支持.如果你觉得好,记得帮我点击推荐^-^ 我们在之前已经插入一些真实数据,其中包含了一个用户和 ...
Log4net入门（WCF篇）
在上一篇Log4net入门(ASP.NET MVC 5篇)中,我们讲述了如何在ASP.NET MVC 5项目中使用log4net.在这一篇中,我们将讲述如何在WCF应用中使用log4net,为了讲述这 ...
jQuery：实现网页的打印功能
实现的打印功能大致跟浏览器的 Ctrl+P 效果一样一.直接上代码 <!DOCTYPE html> <head> <meta charset="utf-8&q ...
heart
好久没写博客了,不想废话,直接欣赏效果! 点击这里,查看完美效果! 附完整代码: <!doctype html> <html> <head> <meta ch ...
ASP.NET Core 中文文档第三章原理（13）管理应用程序状态
原文:Managing Application State 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:高嵩在 ASP.NET Core 中,有多种途径可以对应用程序的状态进行 ...

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

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

随机推荐

热门专题