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

随机推荐

sqlserver批量修改首字母为大写
'hello world' ----> 'Hello world' update tableName set columnName=CHAR(ASCII(SUBSTRING(columnN ...
centos6.5 nginx-1.8.0和ftp搭建图片服务器
一.Nginx的安装步骤 1.Nginx安装环境: gcc: 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc:yum install gcc-c+ ...
实现php连接memcached
准备工作: 实现lnmp环境给php添加模块,so库下载扩展包:memcache-2.2.5.tgz wget http://pecl.php.net/get/memcache-2.2.5.tgz
javaMail
JavaMail概述: JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. javaMai ...
MongoDB数据实体中的ObjectId序列化成json的一个小坑
很多时候我们都需要对实体对象进行序列化与反序列化,而ObjectId类型,只能用mongo的驱动以bson格式来序列化,但我们对外的交互,一般是json格式. 有两种解决方案: 1.自己写一个json ...
那些年黑了你的微软BUG
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 前言炎炎夏日,朗朗乾坤,30℃ 的北京,你还在 Coding 吗? 整个 7 月都在忙项目,还加了 ...
CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator
CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...
struts debug 标签
< s:debug> 引起下面的错误 org.apache.jasper.JasperException: Caught an exception while getting the pr ...
postman使用
1.postman的下载:google首页左上角应用,点击后,如果没有下载postman,就在google商店搜索,点击右边按钮 2.下载后重新打开google首页,点击应用,可以看到已经下载过了,点 ...
H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

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

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

随机推荐

热门专题