4.1 表单对象

4.1.1 常用方法

4.2 表单内置验证

HTML5 的表单提交时，浏览器允许开发者指定一些条件，他会自动验证各个表单控件的值是否符合条件。

自定义验证信息

selectCustomValidity()方法

控件元素的 setCustomValidity() 方法用来定制校验失败时报错信息。它接受一个字符串作为参数，该字符串就是定制的报错信息。如果参数为空字符串，则上次的报错信息被清楚。

valudatuinMessage 属性

返回一个字符串，表示控件不满条件，浏览器显示的提示文本。 返回空字符串：1，该控件不会在提交时自动校验。2，该控件满足校验条件

validity属性

控件元素的 validity 属性返回一个 validityState 对象，包含当前校验状态的信息，该对象属性为只读属性。详情见下表：

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 概述

在网页的右下角会自动弹出一个窗口，窗口上显示一些信息的桌面通知，只要打开网页，无论在那个网页，都能看到推送的消息。

4.3.2 桌面通知流程

1. 检测浏览器是否支持 Notification 对象
2. 检测浏览器的通知权限，浏览器必须允许通知才能生成消息
3. 如果浏览器权限不够，需要获取浏览器的通知权限
4. 创建消息通知
5. 展示消息通知

4.3.3

浏览器权限

通过window.Notification来判断浏览器是否兼容Notification API

if (window.Notification) { // 判断浏览器是否兼容Notification }

用户权限

要想向用户显示通知消息，就要通过浏览器获取用户权限，主要通过Notification.permission来判断。
Notification.permission包括的值:

• default ：默认。
• granted ：显示通知的权限。
• denied ：用户拒绝。

            let permission = Notification.permission;
             // 显示通知的权限
            if (permission == "granted") {

            } else if (permission == "denied") {
                // 不同意，发不了咯
            } else {
                // 其他状态，可以重新发送授权提示
               Notification.requestPermission();
            }

推送通知

获取用户通知后，就可以进行推送消息啦！！

var notification = new Notification(title, options)

参数如下:
title：显示的通知标题
options:通知的设置选项（可选）

• dir : 文字的方向,它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。
• body:通知的内容。
• icon：要在通知中显示的图标的URL。
• requireInteraction：通知保持有效不自动关闭，默认为false。(测试了下这个参数好像没有效果)

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 概述

可以通过 中国北斗系统， 欧洲伽利略系统等，还可以通过 IP 地址， WIFI 和 移动通信网络等方式进行地理位置定位

4.4.2 遵循流程

1. 开启设备或打开应用。
2. 请求地理位置。
3. 根据定位方式不同，查询相关地理信息
4. 将查询到的信息发送到一个信任的位置服务器，服务器返回地理位置。

4..4.3 函数及方法

全局对象 navigator 的 geolocation 属性的 getCurrentPosition() 方法，会触发浏览器弹出信息条，让用户确定是否分享地理位置。

• show_map 是成功获取位置的回调函数，必须
• handle_error 是获取地理位置失败的回调函数，可选
• PositionOptions 是获取地理位置的设置对象，可选

position 对象的属性：

• coords.latitude 纬度，度
• coords.longtitude 经度，度
• coords.altitude 海拔，米
• coords.accuracy 精确度，米
• coords.altitudeAccuracy 海拔精确度，米
• coords.heading 方向，度，顺时针，以正北为基准
• coords.speed 速度，米/秒
• timestamp 时间戳，类似 Date() 对象

只有前三个属性确保不为空，其余属性因用户的设备和后台定位服务器的不同，可能属性值为 null，其中 heading、speed 是基于用户前一次位置信息计算所得的。

PositionError 对象：

• code
  

  错误类型，属性值为：

  • err.PERMISSION_DENIED 或者 1：用户点击了信息条的“不共享”按钮或者直接拒绝被获取位置信息。
  • err.POSITION_UNAVAILABLE 或者 2：网络不可用或者无法连接到获取位置信息的卫星。
  • err.TIMEOUT 或者 3：网络可用但是花了太长的时间去计算。
  • err.UNKNOWN_ERROR 或者 0：发生其他未知错误。

• message 错误信息，与终端用户无关

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("经度：" + 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>