<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>
表單驗證是網頁中最常見的效果，本篇講了驗證碼驗證，提供給大家參考