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

随机推荐

T-SQL学习记录
T-sql是对SQL(structure query language )的升级.可以加函数. 系统数据库:master管理数据库.model模版数据库,msdb备份等操作需要用到的数据库,tempd ...
BZOJ 3110: [Zjoi2013]K大数查询 [树套树]
3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6050 Solved: 2007[Submit][Sta ...
JDK 中的证书生成和管理工具 keytool
参考资料该文中的内容来源于 Oracle 的官方文档 Java SE Tools Reference .Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以直接找 ...
useful Ansible commands
This article includes some useful Ansible commands. I will try to write blogs by English. You may wa ...
C++的性能C#的产能?! - .Net Native 系列五：.Net Native与反射
此系列系小九的学堂原创翻译,翻译自微软官方开发向导,一共分为六个主题.本文是第五个主题:.Net Native与反射. 向导文链接:<C++的性能C#的产能?! - .Net Native 系列 ...
跟我一起ggplot2（1）
ggplot2 R的作图工具包,可以使用非常简单的语句实现非常复杂漂亮的效果. qplot 加载qplot library(ggplot2) # 测试数据集,ggplot2内置的钻石数据 qplot( ...
2.Kali安装VMware tools（详细+异常处理）
dnt@MT:~$ cd /media/cdrom0 进入光驱内 dnt@MT:/media/cdrom0$ ls 查看当前目录下有哪些内容manifest.txt run_upgrader.sh V ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（54）-工作流设计-所有流程监控
系列目录先补充一个平面化登陆页面代码,自己更换喜欢的颜色背景 @using Apps.Common; @{ Layout = null; } <!DOCTYPE html> <ht ...
如何重置硬盘遭到“损坏”的Linux系统root用户密码
传统印象下Linux是非常坚不可摧的,具有千年不更新,万年不重启的美名.而随着虚拟化的推进,很多跑在虚拟化上的Linux由于先前基础架构的脆弱,变得适应性“越来越不好”,体现在IP存储如果出现节点故障 ...
Java:IO流与文件基础
Java:IO流与文件基础说明: 本章内容将会持续更新,大家可以关注一下并给我提供建议,谢谢啦. 走进流什么是流流:从源到目的地的字节的有序序列. 在Java中,可以从其中读取一个字节序列的对象 ...

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

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

随机推荐

热门专题