HTML5表單、通知和地理信息

4.1 表單對象

4.1.1 常用方法

屬性 說明 實例
append() 向 FormData 對象添加鍵值對 fd.append('key','value')
set() 設(shè)置對應(yīng)鍵 得 value fd.set('key','value')
delete() 接收一個key，刪除 key得名字，如果有多個，都會刪除 fd.delete('key')
get(),getAll() 接受一個參數(shù)， key得名稱，返回第一個 key對應(yīng)得value,getAll 接受一個參數(shù)，key，獲取所有有關(guān)key 對應(yīng)得value fd.get('key'), fd.getAll('key')
has() 接受一個參數(shù)，名稱 key ，返回一個 布爾 值 ,如果key 存在，返回 true， 反之 false fd.has('key')
keys() 一個迭代器，獲取 FormData有關(guān)所有 key fd.keys()
values() 一個迭代器，獲取 FormData 所有得 value fd.values()
enteries() 遍歷所有 得 key 和 value， 包含一個key和 一個 value fd.enteries()

4.2 表單內(nèi)置驗證

HTML5 的表單提交時，瀏覽器允許開發(fā)者指定一些條件，他會自動驗證各個表單控件的值是否符合條件。

屬性名 說明 示例
required 必填項 <input required/>
pattern 必須符合正則表達式 <input parrern="banana | cherry">
minlength/maxlength 字符長度必須為指定個數(shù)字符。minlength 是最小長度，maxlength 是最大值 <input minlength="6" maxlength="6">
min/max 指定字符范圍

自定義驗證信息

selectCustomValidity()方法

控件元素的 setCustomValidity() 方法用來定制校驗失敗時報錯信息。它接受一個字符串作為參數(shù)，該字符串就是定制的報錯信息。如果參數(shù)為空字符串，則上次的報錯信息被清楚。

valudatuinMessage 屬性

返回一個字符串，表示控件不滿條件，瀏覽器顯示的提示文本。 返回空字符串：1，該控件不會在提交時自動校驗。2，該控件滿足校驗條件

validity屬性

控件元素的 validity 屬性返回一個 validityState 對象，包含當前校驗狀態(tài)的信息，該對象屬性為只讀屬性。詳情見下表：

屬性 說明
ValidityState.badInput 布爾值，表示瀏覽器是否不能將用戶輸入轉(zhuǎn)換成正確的類型，比如用戶在數(shù)值框里輸入字符串
ValidityState.customError 布爾值，表示是否已經(jīng)注冊 setCustomValidity() 方法，將校驗信息設(shè)置為一個非空字符串
ValidityState.patternMismatch 布爾值，表示用戶輸入的值是否滿足模式要求
ValidityState.rangeOverflow 布爾值，表示用戶輸入的值是否大于最大范圍
ValidityState.rangUnderflow 布爾值，表示用戶輸入的值是否小于最小范圍
ValidityState.stepMismatch 布爾值，表示用戶輸入的值不符合值的設(shè)置
ValidityState.tooLong 布爾值，表示用戶輸入大的字符超出了最長字符
ValidityState.tooShort 布爾值，表示用戶輸入的字符少于最短字符。
ValidityState.typeMismatch 布爾值，表示用戶填入的值不符合類型要求（主要時類型為 Email 或 URL 的情況）
ValidityState.valid 布爾值，表示用戶是否滿足所有校驗條件
ValidityState.valueMissing 布爾值，表示用戶沒有填入必填的值

4.2.1 代碼演示：

<form id="regUser">
        <p>
            <label for="">用戶名</label>
            <input type="text" name="username" required id="username">
        </p>
        <p>
            <label for="">電子郵件：</label>
            <input type="email" name="email" required id="email">
        </p>
        <p>
            <input type="submit" value="注冊" onclick="checkInput()">
        </p>
    </form>
    <ul id="errorMessage"></ul>
    <script>
        function checkInput(){
            // 判斷是否通過驗證
            let form = document.getElementById('regUser')
            // 郵箱
            let email = document.getElementById('email')
            // 用戶名
            let username = document.getElementById('username')
            // 錯誤總匯
            let errorMessage = document.getElementById('errorMessage')

            errorMessage.innerHTML = ""
            // 判斷驗證
            if(form.checkValidity()){
                alert('驗證通過')
            }else{
                
                // 判斷驗證信息
                if(username.validity.valueMissing){
                    username.setCustomValidity("用戶名不能為空")
                }else{
                    username.setCustomValidity("")
                }
                // 判斷驗證信息
                if(email.validity.valueMissing){

                     // 自定義提示錯誤信息
                    email.setCustomValidity("郵箱不能為空")
                    // 判斷格式類型是否正確
                }else if(email.validity.typeMismatch){

                    // 自定義提示錯誤信息
                    email.setCustomValidity("有個格式錯誤")
                }
                else{
                    email.setCustomValidity("")
                }

                errorMessage.innerHTML += "<li>"+ username.validationMessage +"</li>"
                errorMessage.innerHTML += "<li>"+ email.validationMessage +"</li>"
                
            }
        }
    </script>

4.3 HTML5 桌面通知

4.3.1 概述

在網(wǎng)頁的右下角會自動彈出一個窗口，窗口上顯示一些信息的桌面通知，只要打開網(wǎng)頁，無論在那個網(wǎng)頁，都能看到推送的消息。

4.3.2 桌面通知流程

  1. 檢測瀏覽器是否支持 Notification 對象
  2. 檢測瀏覽器的通知權(quán)限，瀏覽器必須允許通知才能生成消息
  3. 如果瀏覽器權(quán)限不夠，需要獲取瀏覽器的通知權(quán)限
  4. 創(chuàng)建消息通知
  5. 展示消息通知

4.3.3

瀏覽器權(quán)限

通過window.Notification來判斷瀏覽器是否兼容Notification API

if (window.Notification) { // 判斷瀏覽器是否兼容Notification }

用戶權(quán)限

要想向用戶顯示通知消息，就要通過瀏覽器獲取用戶權(quán)限，主要通過Notification.permission來判斷。
Notification.permission包括的值:

  • default ：默認。
  • granted ：顯示通知的權(quán)限。
  • denied ：用戶拒絕。
            let permission = Notification.permission;
             // 顯示通知的權(quán)限
            if (permission == "granted") {

            } else if (permission == "denied") {
                // 不同意，發(fā)不了咯
            } else {
                // 其他狀態(tài)，可以重新發(fā)送授權(quán)提示
               Notification.requestPermission();
            }
推送通知

獲取用戶通知后，就可以進行推送消息啦?。?/p>

var notification = new Notification(title, options)

參數(shù)如下:
title：顯示的通知標題
options:通知的設(shè)置選項（可選）

  • dir : 文字的方向,它的值可以是 auto（自動）, ltr（從左到右）, or rtl（從右到左）。
  • body:通知的內(nèi)容。
  • icon：要在通知中顯示的圖標的URL。
  • requireInteraction：通知保持有效不自動關(guān)閉，默認為false。(測試了下這個參數(shù)好像沒有效果)

4.3.4 代碼演示

<button id="btn">顯示通知</button>
    <script>
        document.getElementById('btn').onclick = function(){

            // 判斷是否支持通知
            if(window.Notification){
                
                // 當Notification.permission == “granted” 時，可以進行通知操作
                if(window.Notification.permission == "granted"){
                    var notification = new Notification("桌面通知",{body:"你有新的消息請注意查                                                         收！"})
                }else{
                    // 當不支持時 去請求通知
                    Notification.requestPermission();
                }
            }else{
                alert("你的瀏覽器不支持通知，請更換瀏覽器")
            }
        }
    </script>

4.4 HTML5 地理位置

4.4.1 概述

可以通過 中國北斗系統(tǒng)， 歐洲伽利略系統(tǒng)等，還可以通過 IP 地址， WIFI 和 移動通信網(wǎng)絡(luò)等方式進行地理位置定位

4.4.2 遵循流程

  1. 開啟設(shè)備或打開應(yīng)用。
  2. 請求地理位置。
  3. 根據(jù)定位方式不同，查詢相關(guān)地理信息
  4. 將查詢到的信息發(fā)送到一個信任的位置服務(wù)器，服務(wù)器返回地理位置。

4..4.3 函數(shù)及方法

全局對象 navigator 的 geolocation 屬性的 getCurrentPosition() 方法，會觸發(fā)瀏覽器彈出信息條，讓用戶確定是否分享地理位置。

  • show_map 是成功獲取位置的回調(diào)函數(shù)，必須
  • handle_error 是獲取地理位置失敗的回調(diào)函數(shù)，可選
  • PositionOptions 是獲取地理位置的設(shè)置對象，可選

position 對象的屬性：

  • coords.latitude 緯度，度
  • coords.longtitude 經(jīng)度，度
  • coords.altitude 海拔，米
  • coords.accuracy 精確度，米
  • coords.altitudeAccuracy 海拔精確度，米
  • coords.heading 方向，度，順時針，以正北為基準
  • coords.speed 速度，米/秒
  • timestamp 時間戳，類似 Date() 對象

只有前三個屬性確保不為空，其余屬性因用戶的設(shè)備和后臺定位服務(wù)器的不同，可能屬性值為 null，其中 heading、speed 是基于用戶前一次位置信息計算所得的。

PositionError 對象：

  • code

    錯誤類型，屬性值為：

    • err.PERMISSION_DENIED 或者 1：用戶點擊了信息條的“不共享”按鈕或者直接拒絕被獲取位置信息。
    • err.POSITION_UNAVAILABLE 或者 2：網(wǎng)絡(luò)不可用或者無法連接到獲取位置信息的衛(wèi)星。
    • err.TIMEOUT 或者 3：網(wǎng)絡(luò)可用但是花了太長的時間去計算。
    • err.UNKNOWN_ERROR 或者 0：發(fā)生其他未知錯誤。

  • message 錯誤信息，與終端用戶無關(guān)

4.4.4 代碼演示

<script>

        // 判斷瀏覽器是否支持地理位置信息
        if(window.navigator.geolocation){

            navigator.geolocation.getCurrentPosition(showPosition,showError,{
                enableHighAccuracy:false,
                timeout:1000*60 * 3,
                maximumAge:5000
            })

            function showPosition(pos){
                console.log("維度：" + pos.coords.latitude);
                console.log("經(jīng)度：" + pos.coords.longitude);
                // ..... 等
            }

            function showError(error){
                switch(error.code){
                    case error.PERMISSION_DENIED:
                        console.log('用戶拒絕了 地理位置請求');
                    break;
                    case error.POSITION_UNAVAILABLE:
                        console.log('位置信息不可用');
                        
                    break;
                }
            }
        }else{
            alert('你的瀏覽器不知 HTML 獲取地理位置信息')
        }
    </script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容