表单验证

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            
//        表单验证    
            
            window.onload=function(){
                
                var bot=document.getElementById("sub");
                var text1=document.getElementById("user")    ;
                var text2=document.getElementById("pass");
                
                text1.onblur=function(){
                    var textval=text1.value;
                    var usereorr= document.getElementById("usereorr");
                    var userlenght= document.getElementById("userlenght");
                    if ( !(textval.length>=6&&textval.length<=20)){
                        
                        userlenght.style.display="inline-block";
                    }
                   if(textval[0]>=0&&textval[0]<=9){
                       usereorr.style.display="inline-block";
                   }
            
                }
               text2.onblur=function(){
                   var text2val=text2.value;
                   var passlenght= document.getElementById("passlenght");
                var passlenght1= document.getElementById("passlenght1");
                   if(text2val.length==0){
                       passlenght.style.display="inline-block";
                       
                   }
                   if(!(text2val.length>=6&&text2val.length<=20)){
                       passlenght1.style.display="inline-block";
                   }
               }
            }

        </script>
        
    </head>
    <body>
        <form action="" method="post">
        <input type="text" name="" id="user" placeholder="请输入用户名"/>
        <span id="usereorr" style="display: none;color: blueviolet;">用户名不能以数字开头</span>
        <span id="userlenght" style="display: none;color: violet;">用户名在6到20位之间</span><br/>
        
        <input type="password" name="" id="pass" placeholder="请输入密码"/>
        <span id="passlenght" style="display: none;color: violet;">密码不能为空</span>
        <span id="passlenght1" style="display: none;color: violet;">密码长度在6到20位之间</span>
        <br/>
        <input type="submit" name="" id="sub" value="登录"/>
        </form>
          
    </body>
</html>

posted on 2017-04-21 11:29  墨雨沉香  阅读(109)  评论(0)    收藏  举报

导航