jQuery实现验证码功能实例分享

来源：动视网责编：小OO 时间：2020-11-27 20:05:10

jQuery实现验证码功能实例分享

效果图。代码如下：<。"；)；//则弹出请输入验证码 }else if(inputCode。=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时 alert("；验证码输入错误。请重新输入"；)；//则弹出验证码输入错误 change()；//刷新验证码 $("；#input"；).val("；"；)；//清空文本框 }else { //输入正确时 alert("；正确"；)；//弹出^-^ }})；<；/script>；<；/body>；<；/html>；

推荐度：

点击下载本文 文档为doc格式

导读效果图。代码如下：<。"；)；//则弹出请输入验证码 }else if(inputCode。=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时 alert("；验证码输入错误。请重新输入"；)；//则弹出验证码输入错误 change()；//刷新验证码 $("；#input"；).val("；"；)；//清空文本框 }else { //输入正确时 alert("；正确"；)；//弹出^-^ }})；<；/script>；<；/body>；<；/html>；

很多编程语言都能实现验证码功能，本文主要介绍了jQuery实现验证码功能的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧，希望能帮助到大家。

效果图：

代码如下：

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #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>
<p> 
 <input type = "text" id = "input"/> 
 <input type = "button" id="code" /> 
 <input type = "button" value = "验证" id="check"/> 
 </p> 
 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
 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>

jQuery实现验证码功能实例分享

推荐度：

点击下载本文 文档为doc格式

标签：分享验证码例子

热门焦点

jQuery实现验证码功能实例分享

jQuery实现验证码功能实例分享

jQuery实现验证码功能实例分享

最新推荐

猜你喜欢

热门推荐