先看效果图。HTML部分就展示出来了。直接看js部分吧
<script>
//设置一个全局的变量,便于保存验证码
var code;
function createCode(){
//首先默认code为空字符串
code = '';
//设置长度,这里看需求,我这里设置了6
var Length = 6;
var textValue = document.getElementById('code');
//设置随机字符
var arr = new Array(0,1,2,3,4,5,6,7,8,9,'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');
//循环Length
for(var i = 0; i < Length; i++){
//设置随机数范围, 以为数组的长度是36 所以 Math.random()*36
code+=arr[Math.floor(Math.random()*36)];
}
//将拼接好的字符串赋值给展示的Value
textValue .value = code;
}
//下面就是判断是否== 的代码,无需解释
function validate(){
var Value = document.getElementById('input').value.toUpperCase();
if(Value ==0){
alert('请输入验证码');
}else if(Value != code){
alert('验证码不正确,请重新输入');
Value = ' ';
createCode();
}else{
alert('验证成功!')
}
}
//设置此处的原因是每次进入界面展示一个随机的验证码,不设置则为空
window.onload = function (){
createCode();
}
</script>
直接复制运行就可以了