jquery验证码验证效果

最新推荐文章于 2025-05-09 14:53:16 发布

AIALOG

最新推荐文章于 2025-05-09 14:53:16 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery，jquery验证码验证效果文章标签： jquery jquery验证码验证效果

本文链接：https://blog.youkuaiyun.com/AIALOG/article/details/71104325

jquery，jquery验证码验证效果专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个简单的表单验证码验证实现方案，包括HTML表单元素、CSS样式和JavaScript代码，展示了如何通过前端技术确保用户输入的有效性和安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<style type="text/css">
.mob{margin-top:10px;}
.mob label{display:inline-block;width:70px;text-align:right;}
.mob input{line-height:25px;}
.cc,.ccc{background:#F7AAAB;display:inline-block;padding:5px 10px;vertical-align:middle;}

.mobbtn{width:80px;height:35px;line-height:35px;text-align:center;border:1px solid #ccc;

text-align:center;display:inline-block;text-decoration:none;}

</style>
</head>
<body>
<form class="deform">
<div class="mob">
<label>姓名:</label>
<input type="text" class="required motext" placeholder="例：李明 / LIMING" id="moname">
</div>
<div class="mob clearfix">
<label class="fl">验证码:</label>
<input type="text" class="required motext mobinput fl" placeholder="例：请填写验证码" id="san">
<a class="cc fl" id="che" >sdfg</a>
<span class="cur fl mena" id="cheee">换一个</span>
</div>
<a href="#" class="mobbtn">提交</a>

</form>

var code;

function createCode(){
code = "";
var codeLength = 4;
var checkCode = document.getElementById("che");
var codeChars = 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','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');
for (var i = 0; i < codeLength; i++){
var charNum = Math.floor(Math.random() * 35);
code += codeChars[charNum];

};

if(checkCode){
checkCode.className = "ccc fl";
checkCode.innerHTML = code;
}

return false;
};
document.getElementById("cheee").addEventListener("click",createCode);
document.getElementById("che").addEventListener("click",createCode);

//移动端变更验证
$(".mobbtn").click(function(){
var $rt=$("#san")
var $srd=$rt.val()
var $ty=$("#che").text()
if($("#moname").val()==""){
alert("投保人姓名不得为空")
$("#moname").focus()
return false
}
if($srd.toUpperCase() != $ty.toUpperCase()){
alert("验证码输入有误！");
createCode();
$rt.focus();
return false;
}
else{
alert("注册成功,密码已发到你的邮箱，请注意查收！")
}
})
</script>

</body>

表单验证是网页中最常见的效果，本篇讲了验证码验证，提供给大家参考