<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;}
</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>
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>
<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>
<script>
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>
表单验证是网页中最常见的效果,本篇讲了验证码验证,提供给大家参考