HTML5約束驗證API-有解無憂

HTML5約束驗證API：

willValidate 表示如果元素的約束沒有被符合則值為 false

validity

validationMessage 用于描述與元素相關約束的失敗資訊，

checkValidity() 表示如果元素沒有滿足它的任意約束，回傳false，其他情況回傳 true

setCustomValidity() 設定自定義驗證資訊，

HTML5新增特性：

id===document.getElementById

但是不推薦直接使用id，因為兼容性不太好，而且容易與其他變數混淆，后期不易維護

validity物件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="" enctype="multipart/form-data">

        <input type="text" name="username" id="username" placeholder="請輸入" required pattern="/\d{4}^$/">

        <input type="submit" value="提交">
    </form>

    <script>
        console.log(username.validity);
    </script>
</body>
</html>

各屬性解釋：

（1）獲取描述與元素相關約束的失敗資訊，用validationMessage，在提交表單時，設定約束驗證條件，

（2）獲取表單和提交按鈕，設定監聽事件，監聽表單提交按鈕的點擊事件！當按鈕點擊時，獲取表單中所有不符合驗證條件的元素，然后通過for回圈，把這些元素的validationMessage錯誤資訊列印出來！

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>Document</title>

    </head>

    <body>

        <form action="" method="get" id="forms">

            <input type="text" id="username" required>

            <input type="submit" value="提交" id="submitBtn">

        </form>

        <script>

            var form = document.getElementById("forms"),

                submitBtn = document.getElementById("submitBtn");

            submitBtn.addEventListener("click", function() {

                var invalidFields = form.querySelectorAll(":invalid");

                for(var i=0; i<invalidFields.length; i++){

                    console.log(invalidFields[i].validationMessage);

                }

            });

        </script>

    </body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="" enctype="multipart/form-data">

        <input type="text" name="username" id="username" placeholder="請輸入" required pattern="/\d{4}^$/" maxlength="5">

        <input type="email" name="email" id="email">
        <!-- 如果輸入的郵箱格式不對，那么typeMismatch就會是true -->

        <input type="search" name="search" id="search">

        <input type="submit" value="提交">
    </form>

    <script>
        console.log(document.getElementById("username")===username);//true
        console.log(username.validity);
        console.log(email.validity);
    </script>
</body>
</html>

search框右邊有個叉叉，如果想要去掉，可以用谷歌瀏覽器的偽類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        /*這種方式在safari中可能會出問題，因此移動端不推薦*/
        input[type="search"]::-webkit-search-cancel-button{
            -webkit-appearance:none;/*去掉右側叉叉*/
            height:15px;
            width:15px;
            background-color: #abcdef;/*可以換成自己的背景圖url*/
        }
    </style>
</head>
<body>
    <form action="" enctype="multipart/form-data">

        <input type="text" name="username" id="username" placeholder="請輸入" required pattern="/\d{4}^$/" maxlength="5">

        <input type="email" name="email" id="email">
        <!-- 如果輸入的郵箱格式不對，那么typeMismatch就會是true -->

        <input type="search" name="search" id="search">

        <input type="submit" value="提交">
    </form>

    <script>
        console.log(document.getElementById("username")===username);//true
        console.log(username.validity);
        console.log(email.validity);
    </script>
</body>
</html>

但是這種方式在safari瀏覽器中會有點擊問題，不建議在移動端使用

建議使用div元素，絕對定位，再添加點擊事件

<input type="number" name="number" id="number" min="3" max="5" value="2">

如果要設定number中只能輸入5位，用max或者maxlength都不好使

需要使用js

<input type="number" name="number" id="number" oninput="checkLength(this,5)">

function checkLength(obj,len){
            if(obj.value.length>len){
                obj.value=https://www.cnblogs.com/chenyingying0/p/obj.value.substr(0,len);
            }
        }

據說如果number中提交的資料是2位小數，提交到后臺會自動舍去小數

（教程里這樣說來著，我自己沒試過沒發現==）

解決方法是添加step

<input type="number" name="number" id="number" oninput="checkLength(this,5)" value="0.02" step="0.01">

如果不想要number中自帶的上下箭頭，解決如下：

input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button{
            -webkit-appearance:none;
            margin:0;
        }

checkvalidity

全部滿足回傳true，有一個不滿足就回傳false

<input type="email" name="email" id="email" value="cyy">

if(email.checkValidity()){
            alert("是郵箱");
        }else{
            alert("不是郵箱");
        }

<input type="text" name="username" id="username" placeholder="請輸入" pattern="/\d{4}^$/" maxlength="5" required>

if(username.checkValidity()){
            alert("符合");
        }else{
            alert("不符合");
        }

setCustomValidity()

<input type="text" name="username" id="username" placeholder="請輸入" pattern="/\d{4}^$/" maxlength="5" required oninput="checkit(this)">

function checkit(obj){
            var validity=obj.validity;
            console.log(validity);
            if(validity.patternMismatch===true){
                obj.setCustomValidity("不符合正則");
            }else{
                obj.setCustomValidity("");
            }
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/7061.html

標籤：HTML5

上一篇：H5微信分享的坑

下一篇：HTML5自帶驗證美化