H5——表單驗證新特性，註冊模態框！

-Advertisement-

...

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

jquery中動畫效果的函數

在jquery中有很多的動畫效果，我給大家分享了一下jquery中的動畫函數 jQuery的效果函數列表： animate():對被選元素應用“自定義”的動畫。 clearQueue()：對被選元素移除所有排隊的函數（仍未運行的）。 delay():對被選元素的所有排隊函數（仍未運行）設置延遲。 d ...
H53D旋轉-遁地龍卷風

(-1)寫在前面首先圖片是我從互聯網上下載的，向這位前輩致敬。我用的是chrome49，沒有加不同瀏覽器的首碼，jquery3.0，圖片資源放在了我的百度雲盤上http://pan.baidu.com/s/1o7LyHp4 (1)知識預備 a.瀏覽器x、y、z軸的概念左手豎代表y軸，右手橫代表x ...
怎樣寫一個webpack loader

在上一篇《webpack從入門到上線》介紹了wepack的配置和相關的概念，這一篇介紹怎樣寫一個webpack loader. 通過寫一個js的html模板為例子。上篇文章已提及，loader載入器就是對各種非正常資源的解析，轉化成瀏覽器可以識別的js/css文件等，甚至可以說loader就是一個 ...
jQuery的效果函數

jQuery有效果函數方法描述 animate() 對被選元素應用“自定義”的動畫 clearQueue() 對被選元素移除所有排隊的函數（仍未運行的） delay() 對被選元素的所有排隊函數（仍未運行）設置延遲 dequeue() 運行被選元素的下一個排隊函數 fadeIn() 淡入被選元素至 ...
jQuery屬性遍歷、HTML操作

jQuery 擁有可操作 HTML 元素和屬性的強大方法。 jQuery 遍歷函數 jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。 jQuery DOM 操作 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素 ...
使用JQuery選擇HTML遍歷函數

使用JQuery，可以很容易的選擇THML元素。但在有些時候，HTML結構比較複雜的時候，提煉我們選擇的元素就是一件比較麻煩的事情。 1、children 這個函數得到一組元素的直接子級。給children()傳遞一個選擇表達式將選擇結果縮小至選中的元素; 如果chilidren()每接受任何參數 ...
JQuery效果

JQuery可以創建顯示、隱藏、切換、滑動以及自定義動畫等效果。 1.hide()/show() hide()/show()是最基礎也是用的最多的一種效果，它用來控制元素的隱藏與顯示。下麵是還沒有進行hide()/show()操作的示例： <style> .demo { margin:100px ...
javascript_core_04

1、數組API——splice： ①刪除：var deletes=arr.splice（starti，n）；刪除starti位置開始的n個，返回刪除元素組成的臨時數組； ②插入：arr.splice（starti，0，值1，值2……）；在starti位置插入值1，值2……； ③替換：var dele ...