DOM练习及总结（验证码）

利用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.注意定义空值，清空每次赋值的