前端开发jQuery怎么做验证码?

前端开发经验总结分享|前端开发表格怎么设置列？|自学web前端开发知乎

html 代码

<!Doctype html>

<head>

<title>前端手机端开发曲屏：jquery验证码</title>

#code {

width: 80px;

height: 30px;

font-size: 20px;

font-family: Arial;

font-style: italic;

font-weight: bold;

border: 0;

letter-spacing: 2px;

color: blue;

}

</style>

</head>

<body>

<div>

</div>

function change() {

code = $(“#code”);

// 验证码组成库

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’

);

codes = ”; // 重新初始化验证码

for (var i = 0; i < 4; i++) {

// 随机获取一个数组的下标

var r = parseInt(Math.random() * arrays.length);

codes += arrays[r];

}

// 验证码添加到input里

code.val(codes);

}

change();

code.click(change);

//单击验证

$(“#check”).click(function () {

var inputCode = $(“#input”).val().toUpperCase(); //取得输入的验证码并转化为大写

console.log(inputCode);

if (inputCode.length == 0) { //若输入的验证码长度为0

alert(“请输入验证码！”); //则弹出请输入验证码

} else if (inputCode != codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时

alert(“验证码输入错误!请重新输入”); //则弹出验证码输入错误

change(); //刷新验证码

$(“#input”).val(“”); //清空文本框

} else { //输入正确时

alert(“正确”); //弹出^-^

}

});

</script>

</body>

</html>

前端开发兼容华为手机类型|手机wap前端开发标准|excel前端程序开发

前端开发jQuery怎么做验证码?

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发