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

来源:http://www.cnblogs.com/li-han/archive/2016/09/16/5876245.html
-Advertisement-
Play Games

...


<!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-
Play Games
更多相關文章
  • 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 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類