利用DOM進行表單驗證

例：生成4個隨機數當做驗證碼

//HTML輸出程序

驗證碼：<div id="yzm" onClick="huanyizhang"></div><br>

請輸入驗證碼：<input type="text" id="shuru"><br>

<button onClick="yz">驗證</button><span id="sp"></span>

var arr=[0，2,1,3,5,4,8,6]; //定義一個數組，用於存放隨機數

var yzm1=document.getElementById("yzm"); //獲取yzm的元素

var str=""; //定義一個空的變量用於情空以前賦值的驗證碼

function huanyizhang(){ //定義一個方法用於重新生成驗證碼

for(var i=0;i<4;i++){ //定義循環次數

var xb=Math.random()*arr.length; //定義一個變量用於存放隨機生成的驗證碼

str=str+arr[xb]; // 將驗證碼存放到變量中

}

yzm1.innerHTML=str; //將變量輸出到表單中

}

var shuru1=document.getElementById("shuru").value; //獲取用戶輸入的驗證碼的值

var trueorfalse=document.getElementById("sp").innerHTML //獲取最終判斷結果span標簽的值

function yz(){ //定義一個方法用來驗證輸入的結果是否正確

if(shuru1==str){ //當正確時輸出

trueorfalse="驗證碼輸入正確";

}else{ //當錯誤時輸出

trueorfalse="驗證碼輸入錯誤";

}

}

思路：

1.先建立HTML

2.觀察需要獲取的值，和想要輸入的值

3.定義變量獲取想要的元素並添加js事件

註意及易錯

1.註意要輸入的值是不是表單元素，表單元素需要用.value來獲值，非表單元素需要用innerHTML來獲取

2.註意定義空值，清空每次賦值的

DOM練習及總結（驗證碼）