js注册无刷新验证表单提示特效代码仿网易5300
所有js代码
 window.onload=function(e)
    {
        var form=document.querySelector('form');
        var userName=document.querySelector('#userName');
        var passWord=document.querySelector('#passWord');
        var rePassWord=document.querySelector('#rePassWord');
        var name=document.querySelector('#name');
        var NC=document.querySelector('#NC');
        var tel=document.querySelector('#tel');
        var email=document.querySelector('#email');
        var span=document.querySelectorAll('span');

        //onsubmit事件
        form.onsubmit=function(e)
        {
            var username=checkUserName();
            if(!username)
            {
                return false;
            }
            var password=checkPassWord();
            if(!password)
            {
                return false;
            }
            var rePassWord=checkRePassWord();
            if(!rePassWord)
            {
                return false;
            }
            var name=checkName();
            if(!name)
            {
                return false;
            }
            var NC=checkNc();
            if(!NC)
            {
                return false;
            }
            var tel=checkTel();
            if(!tel)
            {
                return false;
            }
            var email=checkEmail();
            if(!email)
            {
                return false;
            }
            return true;
        };



        //onblur失去焦点事件
        userName.onblur=function(e)
        {
            checkUserName();
        };
        passWord.onblur=function(e)
        {
            checkPassWord();
        };
        rePassWord.onblur=function(e)
        {
            checkRePassWord();
        };
        name.onblur=function(e)
        {
            checkName();
        };
        NC.onblur=function(e)
        {
            checkNC();
        };
        tel.onblur=function(e)
        {
            checkTel();
        };
        email.onblur=function(e)
        {
            checkEmail();
        };



//---------------------------------函数封装-------------------------------------------------------------
       //通行证用户名
        function checkUserName(e)
        {
            if(userName.value.length==0)
            {
                span[0].innerText='通行证用户名不能为空';
                span[0].className='danger';
                return false;
            }
            var pattern=/^[A-Za-z][A-Za-z0-9]{3,11}$/;
            if(!pattern.test(userName.value))
            {
                span[0].innerText='通行证用户名格式错误,请重新输入';
                span[0].className='danger';
                return false;
            }
            span[0].innerText='通行证用户名输入正确';
            span[0].className='success';
            return true;
        }



        //登录密码
        function checkPassWord(e)
        {
            if(passWord.value.length==0)
            {
                span[1].innerText='密码不能为空';
                span[1].className='danger';
                return false;
            }
            var pattern=/^[A-Za-z0-9]{6,16}$/;
            if(!pattern.test(passWord.value))
            {
                span[1].innerText='密码不符合格式,请重新输入';
                span[1].className='danger';
                return false;
            }
            span[1].innerText='密码输入正确';
            span[1].className='success';
            return true;
        }


        //重复登录密码
        function checkRePassWord(e)
        {
            if(rePassWord.value.length==0)
            {
                span[2].innerText='重复密码不能为空';
                span[2].className='danger';
                return false;
            }
            if(rePassWord.value!=passWord.value)
            {
                span[2].innerText='两次输入的密码不一致,请重新输入';
                span[2].className='danger';
                return false;
            }
            span[2].innerText='两次密码一致';
            span[2].className='success';
            return true;
        }


        //真实姓名(2-4位汉字)
        function checkName(e)
        {
            if(name.value.length==0)
            {
                span[3].innerText='真实姓名不能为空';
                span[3].className='danger';
                return false;
            }
            var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
            if(!pattern.test(name.value))
            {
                span[3].innerText='真实姓名格式错误,请重新输入';
                span[3].className='danger';
                return false;
            }
            span[3].innerText='真实姓名输入正确';
            span[3].className='success';
            return true;
        }



        //昵称(6-20位所有字符)
        function checkNC(e)
        {
            if(NC.value.length==0)
            {
                span[4].innerText='昵称不能为空';
                span[4].className='danger';
                return false;
            }
            var pattern=/^.{3,20}$/;
            if(!pattern.test(NC.value))
            {
                span[4].innerText='昵称格式错误,请重新输入';
                span[4].className='danger';
                return false;
            }
            span[4].innerText='昵称输入正确';
            span[4].className='success';
            return true;
        }



        //手机号()
        function checkTel(e)
        {
            if(tel.value.length==0)
            {
                span[5].innerText='手机号不能为空';
                span[5].className='danger';
                return false;
            }
            var pattern=/^1[34578]\d{9}$/;
            if(!pattern.test(tel.value))
            {
                span[5].innerText='手机号码格式错误,请重新输入';
                span[5].className='danger';
                return false;
            }
            span[5].innerText='手机号输入正确';
            span[5].className='success';
            return true;
        }



        //邮箱
        function checkEmail(e)
        {
            if(email.value.length==0)
            {
                span[6].innerText='邮箱不能为空';
                span[6].className='danger';
                return false;
            }
            var pattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!pattern.test(email.value))
            {
                span[6].innerText='邮箱格式错误,请重新输入';
                span[6].className='danger';
                return false;
            }
            span[6].innerText='邮箱输入正确';
            span[6].className='success';
            return true;
        }
    }
      立即下载 ( 文件大小:0.02 M)

    浏览器兼容性

    1. IE 7
    2. IE 8
    3. IE 9
    4. Mozilla Firefox
    5. Google Chrome
    6. Oper
    7. Safari

    技术讨论区

    1. ——踏梦者1

      ——踏梦者

      效果还不错就是有点老

      2018-1-7 13:27:23| 回复

    2. 请先登录

        发 布

    键盘快捷键: 上一个 下一个