表单验证

欢迎注册

用户名:

密码:

确认密码：

*两次密码输入不一致

手机号码：

*请输入正确中国大陆手机号

验证码：

        </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;};
    }
}

作者：一只大喵喵
来源：CSDN
原文：https://blog.csdn.net/Cream_Cicilian/article/details/80406487
版权声明：本文为博主原创文章，转载请附上博文链接！在这里插入代码片