一、驗證表單
- 封裝一個函式用于驗證手機號
/**
* @param {String}eleId
* @param {Object}reg
*/
function checkInput(eleId,reg) {
var ele = document.getElementById(eleId);
ele.onblur = function (ev) {
if(!reg.test(this.value)){ //不匹配
this.style.borderColor = "#ff0000" //紅色
}else{ //匹配
this.style.borderColor = "#cccccc" //白色
}
}
}
//驗證手機號
checkInput("phone",/^13[0-9]\d{8]$/)
二、WebsAPI
- JavaScript包含ECMAScript和WebAPIs
- WebAPIs包含BOM和DOM
- BOM:瀏覽物件模型
- DOM：檔案物件模型：（1）一套操作頁面元素的API（2）DOM可以把HTML看作檔案樹，通過DOM提供的API可以對樹上的節點進行操作，
1.DOM
- 基本概念：檔案物件模型（Document Object Model），是W3C組織推薦的處理可擴展標記用語言的編程介面
- 他是一種與平臺和語言無關的應用程式介面，它可以動態地訪問程式和腳本，更新其內容、結構和檔案風格，
- DOM又稱為檔案樹模型
- 檔案：一個網頁可以成為檔案
- 節點：網頁中所有的內容都是節點（標簽、屬性、文本、注釋等）
- 元素：網頁中地標簽，例如：<html>,<head>,<div>
- 屬性：標簽的屬性，例如：href,width,length
- DOM常用操作：
- 獲取檔案元素
- 對檔案元素進行增刪改查操作
- 事件操作
2.window物件
- 所有地瀏覽器都支持window物件，它支持瀏覽器視窗，
- 所有的js全域物件，函式以及變數都能自動成為window物件地成員，
- 全域變數是window物件的屬性，全域函式是window物件的方法，
3.document物件
- document也是window物件地屬性之一；
- document物件是documentHTML的一個實體，也是window物件的一個屬性，因此可以將document物件作為一個全域物件來訪問，
<div id = "testDiv">測驗一個div</div>
<script>
var str = "jdi";
console.log(window.str);
console.log(document);
console.log(document === window.document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
console.log(document.title);
var box = document.getElementById("testDiv");
console.log(box);
console.log(box.innerText);
</script>
運行結果：
三、原始碼：
- D26_1_FormVerification.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D26_1_FormVerification.html - 博客園：
https://www.cnblogs.com/ruigege0000/ - CSDN：
https://blog.csdn.net/weixin_44630050?t=1 - 歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流，后臺回復“禮包”獲取Java大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31495.html
標籤：JavaScript
上一篇：javascript 通信協議