亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
導論 前言 為什么學習JavaScript JavaScript的歷史 基本語法 語法概述 數(shù)值 字符串 對象 數(shù)組 函數(shù) 運算符 數(shù)據(jù)類型轉換 錯誤處理機制 JavaScript 編程風格 標準庫 Object對象 包裝對象和Boolean對象 Number對象 String對象 Math對象 Date對象 RegExp對象 JSON對象 ArrayBuffer:類型化數(shù)組 面向?qū)ο缶幊?/a> 概述 封裝 繼承 模塊化編程 DOM Node節(jié)點 document節(jié)點 Element對象 Text節(jié)點和DocumentFragment節(jié)點 Event對象 CSS操作 Mutation Observer 瀏覽器對象 瀏覽器的JavaScript引擎 定時器 window對象 history對象 Ajax 同域限制和window.postMessage方法 Web Storage:瀏覽器端數(shù)據(jù)儲存機制 IndexedDB:瀏覽器端數(shù)據(jù)庫 Web Notifications API Performance API 移動設備API HTML網(wǎng)頁元素 Canvas API SVG 圖像 表單 文件和二進制數(shù)據(jù)的操作 Web Worker 服務器發(fā)送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML網(wǎng)頁的API HTML網(wǎng)頁元素 Canvas API SVG 圖像 表單 文件和二進制數(shù)據(jù)的操作 Web Worker 服務器發(fā)送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 開發(fā)工具 console對象 PhantomJS Bower:客戶端庫管理工具 Grunt:任務自動管理工具 Gulp:任務自動管理工具 Browserify:瀏覽器加載Node.js模塊 RequireJS和AMD規(guī)范 Source Map JavaScript 程序測試 JavaScript高級語法 Promise對象 有限狀態(tài)機 MVC框架與Backbone.js 嚴格模式 ECMAScript 6 介紹 附錄 JavaScript API列表
characters

    • 表單的驗證

      • HTML 5表單驗證

      • checkValidity方法,setCustomValidity方法,validity對象

    • 參考鏈接

表單的驗證

HTML 5表單驗證

所謂“表單驗證”,指的是檢查用戶提供的數(shù)據(jù)是否符合要求,比如Email地址的格式。HTML 5原生支持表單驗證,不需要JavaScript。

<input type="date" >

上面代碼指定該input輸入框只能填入日期,否則瀏覽器會報錯。

但有時,原生的表單驗證不完全符合需要,而且出錯信息無法指定樣式。這時,可能需要使用表單對象的noValidate屬性,將原生的表單驗證關閉。

var form = document.getElementById("myform");
form.noValidate = true;

form.onsubmit = validateForm;

上面代碼先關閉原生的表單驗證,然后指定submit事件時,讓JavaScript接管表單驗證。

此外,還可以只針對單個的input輸入框,關閉表單驗證。

form.field.willValidate = false;

每個input輸入框都有willValidate屬性,表示是否開啟表單驗證。對于那些不支持的瀏覽器(比如IE8),該屬性等于undefined。

麻煩的地方在于,即使willValidate屬性為true,也不足以表示瀏覽器支持所有種類的表單驗證。比如,F(xiàn)irefox 29不支持date類型的輸入框,會自動將其改為text類型,而此時它的willValidate屬性為true。為了解決這個問題,必須確認input輸入框的類型(type)未被瀏覽器改變。

if (field.nodeName === "INPUT" && field.type !== field.getAttribute("type")) {
    // 瀏覽器不支持該種表單驗證,需自行部署JavaScript驗證
}

checkValidity方法,setCustomValidity方法,validity對象

checkValidity方法表示執(zhí)行原生的表單驗證,如果驗證通過返回true。如果驗證失敗,則會觸發(fā)一個invalid事件。使用該方法以后,會設置validity對象的值。

每一個表單元素都有一個validity對象,它有以下屬性。

  • valid:如果該元素通過驗證,則返回true。

  • valueMissing:如果用戶沒填必填項,則返回true。

  • typeMismatch:如果填入的格式不正確(比如Email地址),則返回true。

  • patternMismatch:如果不匹配指定的正則表達式,則返回true。

  • tooLong:如果超過最大長度,則返回true。

  • tooShort:如果小于最短長度,則返回true。

  • rangeUnderFlow:如果小于最小值,則返回true。

  • rangeOverflow:如果大于最大值,則返回true。

  • stepMismatch:如果不匹配步長(step),則返回true。

  • badInput:如果不能轉為值,則返回true。

  • customError:如果該欄有自定義錯誤,則返回true。

setCustomValidity方法用于自定義錯誤信息,該提示信息也反映在該輸入框的validationMessage屬性中。如果將setCustomValidity設為空字符串,則意味該項目驗證通過。

參考鏈接


Previous article: Next article: