大一的时候的工作室作业,事实上这个在后来的项目里运用很多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
display: none;
}
.main{
width:450px;
height: 400px;
/*background-color: pink;*/
border: 2px solid black;
position: absolute;
left: 50%;
margin-left: -200px;
}
p{
display: inline-block;
/*background-color: #F0A6CE;*/
width: 80px;
}
.yanzheng{
width: 150px;
height: 80px;
/*background-color: #D15BEA;
*/float: right;
margin-right: 10px;
}
.mm{
font-family:Arial;
font-style:italic;
color:blue;
font-size:30px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
float: right;
cursor:pointer;
text-align:center;
border: 2px solid black;
width: 140px;
height: 40px;
/*background-color: #1B86F7;*/
}
.yanzheng a{
font-size: 12px;
}
.ma{
width: 150px;
height: 60px;
/* background-color: #1B86F7;*/
}
</style>
</head>
<body onload="createCode()">
<div class="main">
<h2>欢迎注册</h2>
<form action="https://www.zhihu.com/" id="biaodan" >
<p>用户名:</p><input type="text" placeholder="请输入不小于2个字符"><span></span><br>
<p>密码:</p><input type="password" placeholder="密码需要大于6个字符"><span></span><br>
<p>确认密码:</p><input type="password" disabled=""><span>*两次密码输入不一致</span><br>
<p>手机号码:</p><input type="text" placeholder="请输入正确中国大陆手机号"><span>*请输入正确中国大陆手机号</span><br>
<p>验证码:</p><input type="text"><span></span>
<div class="yanzheng">
<div class="mm">
<div class="ma" onclick="createCode()" id="checkCode"></div>
</div>
<a href="#" onclick="createCode()">看不清楚,换一张</a>
</div>
<br>
<input type="submit" id="tijiao">
</form>
</div>
<script type="text/javascript">
var oInput=document.getElementsByTagName('input');
var namea=oInput[0];
console.log(namea)
var oPassword=oInput[1];
var checkPassword=oInput[2];
var phone=oInput[3];
var yanZhen=oInput[4];
var oSpan=document.getElementsByTagName('span');
var tishi1=oSpan[0];
var tishi2=oSpan[1];
var tishi3=oSpan[2];
var tishi4=oSpan[3];
var tishi5=oSpan[4];
var oSubmit=document.getElementById('tijiao');
var oBiaodan=document.getElementById('biaodan');
var nameaOK=0;
var oPasswordOK=0;
var checkPasswordOK=0;
var phoneOK=0;
var yanzhengOK=0;
oBiaodan.onsubmit=function(){return false;};
//name
function getLength(str){
return str.replace(/[xoo-xff]/,"xx").length;
}
namea.onfocus=function(){
tishi1.style.display="inline-block";
}
namea.onkeyup=function(){
tishi1.style.display="inline-block";
var name_length=getLength(this.value);
tishi1.innerHTML=name_length+"个字符";
tishi1.style.color="red";
}
namea.onblur=function(){
var name_length=getLength(this.value);
if(name_length<3){
tishi1.style.display="inline-block";
tishi1.innerHTML="!必须输入大于2个字符";
tishi1.style.color="#BE0C0C";
nameaOK=0;
}
else{
tishi1.style.display="inline-block";
tishi1.innerHTML="√";
tishi1.style.color="#2FF780";
nameaOK=1;
}
fin();
}
//password
oPassword.onfocus=function(){
tishi2.style.display="inline-block";
}
oPassword.onkeyup=function(){
tishi2.style.display="inline-block";
var password_length=getLength(this.value);
tishi2.innerHTML=password_length+"个字符";
tishi2.style.color="red";
if(this.value.length>6){
checkPassword.removeAttribute("disabled");
}
else{
checkPassword.setAttribute("disabled","true");
}
}
oPassword.onblur=function(){
var password_length=getLength(this.value);
if(password_length<7){
tishi2.style.display="inline-block";
tishi2.innerHTML="!必须输入大于6个字符";
tishi2.style.color="#BE0C0C";
oPasswordOK=0;
}
else{
tishi2.style.display="inline-block";
tishi2.innerHTML="√";
tishi2.style.color="#2FF780";
oPasswordOK=1;
}
fin();
if(this.value!=checkPassword.value){
tishi3.style.display="inline-block";
tishi3.style.color="#BE0C0C";
tishi3.innerHTML="*两次密码输入不一致";
checkPasswordOK=0;
}
// else{
// // tishi3.style.display="inline-block";
// // tishi3.innerHTML="√";
// // tishi3.style.color="#2FF780";
// // checkPasswordOK=1;
// }
}
//checkpassword
checkPassword.onblur=function(){
// console.log(this.value.length);
if(this.value!=oPassword.value){
tishi3.style.display="inline-block";
tishi3.style.color="#BE0C0C";
tishi3.innerHTML="*两次密码输入不一致";
checkPasswordOK=0;
}
else{
tishi3.style.display="inline-block";
tishi3.innerHTML="√";
tishi3.style.color="#2FF780";
checkPasswordOK=1;
}
fin();
if(this.value.length<=0){
tishi3.style.display="inline-block";
tishi3.style.color="#BE0C0C";
tishi3.innerHTML="*两次密码输入不一致";
checkPasswordOK=0;
}
// else{
// tishi3.style.display="inline-block";
// tishi3.style.color="#BE0C0C";
// tishi3.innerHTML="*两次密码输入不一致";
// checkPasswordOK=0;
// }
}
//phone
phone.onblur=function(){
var shu=/\d/;
var shouji=/^1[34578]\d{9}$/
if(shouji.test(this.value)){
if(this.value.length==11){
tishi4.style.display="inline-block";
tishi4.innerHTML="√";
tishi4.style.color="#2FF780";
phoneOK=1;
}
else{
tishi4.style.display="inline-block";
tishi4.innerHTML="!请输入正确中国大陆手机号";
tishi4.style.color="#BE0C0C";
phoneOK=0;
}
}
else{
tishi4.style.display="inline-block";
phoneOK=0;
}
fin();
}
//验证码
var code;
function createCode()
{
code = "";
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById("checkCode");
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() * 52);
code += codeChars[charNum];
}
if(checkCode)
{
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
// tishi5.innerHTML="请输入验证码";
yanZhen.onblur=function(){
var inputCode=yanZhen.value;
if(inputCode.length <= 0)
{
tishi5.style.display="inline-block";
tishi5.innerHTML="×";
tishi5.style.color="#BE0C0C";
}
else if(inputCode.toUpperCase() != code.toUpperCase())
{
tishi5.style.display="inline-block";
tishi5.innerHTML="×";
tishi5.style.color="#BE0C0C";
createCode();
}
else
{
tishi5.style.display="inline-block";
tishi5.innerHTML="√";
tishi5.style.color="#2FF780";
yanzhengOK=1;
fin();
}
}
function fin(){
if(nameaOK==1&&oPasswordOK==1&&checkPasswordOK==1&&phoneOK==1&&yanzhengOK==1){
oBiaodan.onsubmit=function(){return true;};
}
else{
oBiaodan.onsubmit=function(){return false;};
}
}
</script>
</body>
</html>