1. 程式人生 > 其它 >h5表單驗證

h5表單驗證

1.提示語言 placeholder

  移動端不支援:(1)<input placeholder="Date" class="textbox-n" type="text"  onfocus="(this.type="dete")" id="date"

              (2)input輸出框外套接div

2. html5表單中新增型別

  email、url、number、range、date(date, month, week, time, datetime,datetime-local)、search、color、tel等

3.自動提示屬性

  autocomplete 

4.提示選擇

  list和datalist

5.自動獲得焦點

  autofocus

6.必填

  required

7.表單驗證正則

  pattern

8.必填選項繞過驗證

  novalidate或者formnovalidate

9.label中for屬性

  使得label與後文input繫結,點選label相當於點選input

 

演示如下

 

10. 約束驗證API

  (1)willValidate

  (2)validaty

  (3)ValidationMessage

  (4)checkValidaty() 方法

  (5)setCustomValidity()方法

11.常用偽類

  (1):required和:optional   (:required指選擇器在表單元素是必填項時設定指定樣式,後者指任意沒有required屬性

  (2):in-range和:out-of-range  (in-range對元素繫結的值在指定範圍限制內時具有範圍限制的元素進行樣式設定。,

  (3):valid和:invalid   (valid有效,即當填寫的內容符合要求的時候觸發)

  (4):read-only和:read-write  (:read-write當一個元素是可編輯元素時,可以修改其樣式,read-write只針對當一個可編輯元素被賦予readonly(只讀)屬性時,可以修改其樣式)

12. 常用屬性使用

  text-indent 屬性規定文字塊中首行文字的縮排

  line-height 屬性設定行間的距離

  transition 屬性是一個簡寫屬性,用於設定四個過渡屬性

  • transition-property   規定設定過渡效果的 CSS 屬性的名稱。書寫在div:hover內
  • transition-duration    規定完成過渡效果需要多少秒或毫秒。
  • transition-timing-function   規定速度效果的速度曲線。
  • transition-delay 定義過渡效果何時開始。

13. 常用時間應用

  oninput   事件在使用者輸入時觸發

  oninvalid  輸入無效時觸發

  onchange   在表單元素的內容改變時觸發

參考視訊 :https://www.bilibili.com/video/BV16K4y1Z7Gb?p=15