HTML5的新特性 基礎知識(3)

2021-07-27 22:20:47 字數 2460 閱讀 7512

1. setcustomvalidity()

1.1 作用

自定義錯誤資訊,一旦設定好了setcustomvalidity(),當前表單是不允許被提交的,一旦提交,顯示自定義錯誤資訊

1.2 注意

setcustomvalidity(""),一旦資料被修改正確後,需要通過setcustomvalidity("")清空錯誤驗證訊息,使得表單允許被提交

2.checkvalidity()

2.1作用

在不提交表單的情況下對表單或者表單元素進行驗證。如果有問題的話,返回值為false;如果沒有問題,返回值為true。

3. invalid事件

表單在提交過程中,檢測到有無效域時,所激發的事件。該事件的本質是獲取產生錯誤的那一組元素。

3.1如何使用

document.forms[0].addeventlistener("invalid",form_invalid,true);

function form_invalid(e)

4.validatestate狀態

表示指定的表單元素能夠出現的所有的錯誤狀態

4.1如何獲取validatestate

formelement.validity;

4.2錯誤狀態值

1、判斷是否通過所有的驗證規則

formelement.validity.valid:通過所有的驗證後,返回值為true,否則為false。與checkvalidity()類似

2、判斷是否為空

formelement.validity.valuemissing

注意:驗證有required屬性的控制項,值是否為空。值為空,返回true。否則為false

3、判斷資料是否違反型別

formelement.validity.typemismatch

看輸入的資料,與type屬性是否相等,如果不符返回為true,否則返回false

4、判斷資料是否違反pattern屬性的約束

formelement.validity.patter****match

違反為true,否則為false

5、判斷資料是否違反了定義的step,多數使用在型別上

formelement.validity.stepmismatch

違反為true,否則為false

6、輸入的資料長度超出了maxlength所定義的長度

formelement.validity.toolong

用於比較位數

7、輸入的值小於定義的min值

formelement.validity.rangeunderflow

8、輸入的值大於定義的max值

formelement.validity.rangeoverflow

用於比較大小

9、判斷表單元素是否已經設定了自定義錯誤訊息

a)formelement.validity.setcustomvalidity("格式不正確")

formelement.validity.customerror;返回值為true

b)formelement.validity.setcustomvalidity("")

formelement.validity.customerror;返回值為false

新課:標籤

標籤  實現過程比較麻煩

如: 

語法:寫法一:   這種方法用的比較多

寫法二: 例:

preload屬性:該屬性可以設定三個值:

metadata:推薦瀏覽器抓取一些資源的資訊

ended:**到達末尾時觸發

pause:**暫停時觸發

下面是h5中新增的**處理方法:

load();載入**檔案,動態應用程式可使用該方法提前載入

canplaytype(type):檢視瀏覽器是否支援這種檔案格式的**檔案

canplaytype(type)中:

音訊格式:如audio/***例:

$("media").canplaytype("video/mp4");

返回值:

duration:返回**總時長,以秒為單位

step1:實現檢視介面

play()

pause()

按鈕文字切換

step3:

3.1 完成滾動條的自然滾動

maxim:600

size:待求

currenttime/duration =size/maxim

size=currenttime/duration*maxim

e.pagex - div.offsetleft

e.offsetx;

檢查音訊格式:$("audio").canplaytype("audio/***")

audio元素支援以下屬性

controls:啟用瀏覽器提供的預設頁面

preload

案例:

play

html5的基礎知識

是宣告html5文件 不區分大小寫 是頁面的根元素 包含文件的元 meta 資料,例如定義網頁編碼格式為utf 8 描述了文件的標題 包含了可見的頁面內容 為大標題,從大到小可用從h1 h6 為乙個段落 標籤經常是成對出現的,第乙個為開始標籤,第二個為結束標籤 html的檔名字尾可用.html也可以...

HTML5的新特性

html的新特性 html5是下一代html標準 強化了web的表現性 支援網頁多 提供canvas畫布 2d圖形 三維 圖形及特效 支援語義化標籤 header footer 新的表單標籤 增加離線本地儲存 地理定位 應用快取 快取 將經常需要訪問的資料,放在記憶體中或者本地磁碟裡 canvas ...

HTML5的新特性

我是頭部 導航標籤 內容標籤 定義文件某個區域 側邊欄標籤 尾部標籤音訊標籤type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為日期型別 type time 限制使用者輸入為時間型別 type month...