demo
<body onload="changeImg()"> <div class="main_bar"> <div id="login_form" class="login_form"> <div class="title"></div> <form action="login.html"> <div id="form_widgt"> <input type="text" name="name" class="name" placeholder="请输入账号""><br> <input type="password" name="pwd" class="pwd" placeholder="请输入密码"><br> <p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="验证码"> <span id="code" class="code_pic" title="看不清，换一张"></span></p> <p class="errorTips" id="errorTips"></p> <a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登录</a> </div> </form> <div class="re_pwd"><a href="">忘记密码了</a></div> </div> </div> <script type="text/javascript"> // 声明一个变量用于存储生成的验证码 document.getElementById('code').onclick = changeImg; function changeImg(){ // 验证码组成库 var arrays=new Array( '1','2','3','4','5','6','7','8','9','0', 'a','b','c','d','e','f','g','h','i','j', 'k','l','m','n','o','p','q','r','s','t', 'u','v','w','x','y','z', 'A','B','C','D','E','F','G','H','I','J', 'K','L','M','N','O','P','Q','R','S','T', 'U','V','W','X','Y','Z' ); // 重新初始化验证码 code =''; // 随机从数组中获取四个元素组成验证码 for(var i = 0; i<4; i++){ // 随机获取一个数组的下标 var r = parseInt(Math.random()*arrays.length); code += arrays[r]; } // 验证码写入span区域 document.getElementById('code').innerHTML = code; } // 验证验证码 function check(){ var error; // 获取用户输入的验证码 var codeInput = document.getElementById('codeInput').value; if(codeInput.toLowerCase() == code.toLowerCase()){ // console.log('123'); return true; }else{ error = '验证码错误，重新输入'; document.getElementById('errorTips').innerHTML = error; return false; } } </script> </body>