欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5表單的自動驗證、取消驗證、自定義錯誤信息的操作

  發(fā)布時間：2024-09-23 16:24:05   作者：pan_junbiao   我要評論
本文介紹了HTML5中表單的自動驗證、取消驗證、自定義錯誤信息等功能,通過required、pattern、min、max和step屬性,可以實現(xiàn)對表單輸入的自動檢查，novalidate和formnovalidate屬性可用于取消驗證,感興趣的朋友跟隨小編一起看看吧

1、自動驗證

通過在元素中使用屬性的方法，該屬性可以實現(xiàn)在表單提交時執(zhí)行自動驗證的功能。下面是關(guān)于對元素內(nèi)輸入內(nèi)容進(jìn)行限制的屬性的指定。

屬性說明
required輸入內(nèi)容是否不為空
pattern輸入的內(nèi)容是否符合指定格式
min、max輸入的數(shù)值是否在min~max范圍
step判斷輸入數(shù)值是否為step的倍數(shù)

1.1 required 屬性

required 屬性的主要目的是確保表單控件中的值已填寫，一旦為某個輸入型控件設(shè)置了 required 屬性，就必須填寫此項，否則無法提交表單。

屬性用法如下：

<form>
    電子郵箱：<input type="email" required /></br>
    <input type="submit" value="提交"/>
</form>

執(zhí)行結(jié)果：

1.2 pattern 屬性

pattern 屬性的主要目的是根據(jù)表單控件上設(shè)置的格式規(guī)則驗證輸入是否為有效格式。通過在 input 元素中使用 pattern 屬性，并將屬性值設(shè)為某個格式的正則表達(dá)式，該屬性實現(xiàn)在提交表單時會檢查其內(nèi)容是否符合給定格式。

屬性用法如下：

<form>
    請輸入內(nèi)容：<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一個數(shù)字和三個大寫字母"/>
    <input type="submit" value="提交"/>
</form>

執(zhí)行結(jié)果：

1.3 min、max 和 step 屬性

通過設(shè)置 min 和 max 屬性，可以將輸入控件的數(shù)值輸入范圍限定在最低值和最高值之間。設(shè)置其 step 屬性能夠制定輸入值遞增或遞減的梯度。

屬性用法如下：

數(shù)值1：<input type="number"  value="25" min="10" max="100" step="5"/></br>
數(shù)值2：<input type="range"  value="45" min="0" max="100" step="5"/>

執(zhí)行結(jié)果：

2、checkValidity 顯示驗證

除了對 input 元素添加屬性進(jìn)行元素內(nèi)容有效性的自動驗證，所有的表單元素和輸入元素（包括：select 和 textarea）在其 DOM 節(jié)點上都有一個 checkValidity 方法。當(dāng)想要覆蓋瀏覽器的默認(rèn)的驗證和反饋過程時，可以使用這個方法。checkValidity 方法根據(jù)驗證檢查成功與否，返回 true 或 false，與此同時會告訴瀏覽器運行其檢查。

【實例】使用 checkValidity 方法驗證用戶輸入的電子郵箱格式是否正確。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>checkValidity顯示驗證</title>
    <script type="text/javascript">
        function check() {
            var email = document.getElementById("email");
            if (email.value == "") {
                alert("請輸入電子郵箱");
                return false;
            }
            else if (!email.checkValidity()) {
                alert("請輸入正確的電子郵箱");
                return false;
            }
            else {
                alert("您輸入的電子郵箱格式正確");
                return true;
            }
        }
    </script>
</head>
<body>
    <form onsubmit="return check()">
        <label for="email">電子郵箱：</label>
        <input name="email" id="email" type="email" />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

執(zhí)行結(jié)果：

3、取消驗證

HTML5 提供了兩種方法用于取消表單驗證。

第一種方法是利用 form 元素的 novalidate 屬性，它可以關(guān)閉整個表單驗證。使用方法如下：

<form novalidate>
</form>

第二種方法是利用 input 元素或 submin 元素的 formnovalidate屬性，利用 input 元素的 formnovalidate 屬性可以讓表單驗證對單個 input 元素失效。使用方法如下：

<input type="email" formnovalidate />

4、自定義錯誤信息

HTML5 中許多新的 input 元素都帶有對于輸入內(nèi)容的有效性的校驗，如果檢查不通過，瀏覽器會針對該元素提供錯誤信息。但有時候開發(fā)者不想使用這些默認(rèn)的錯誤提示信息，而想使用自己定義的錯誤提示信息；或者有時，想給某個文本框增加一種錯誤提示信息。

【實例】使用 setCustomValidity 方法來自定義錯誤信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>自定義錯誤信息</title>
    <script>
        function check() {
            var pass1 = document.getElementById("pass1");
            var pass2 = document.getElementById("pass2");
            var email = document.getElementById("email");
            if (pass1.value != pass2.value) {
                pass2.setCustomValidity("密碼不一致。");
            }
            else {
                pass2.setCustomValidity("");
            }
            if (!email.checkValidity()) {
                email.setCustomValidity("請輸入正確的電子郵箱地址。");
            }
        }
    </script>
</head>
<body>
    <form id="testform">
        密碼：<input type=password name="pass1" id="pass1" /><br />
        確認(rèn)密碼：<input type=password name="pass2" id="pass2" /><br />
        電子郵箱：<input type=email name="email1" id="email" /><br />
        <div><input type="submit" onClick="return check();" /></div>
    </form>
</body>
</html>

執(zhí)行結(jié)果：

到此這篇關(guān)于HTML5表單的自動驗證、取消驗證、自定義錯誤信息的文章就介紹到這了,更多相關(guān)HTML5表單自動驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論