html front end login authentication

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the Document </ title > 
    < Script the src = "../ jQuery-1.7.2 / jQuery. min.js " > </ Script > 
    < Script > 
    $ ( function () {
         // onblur: cursor leaves the control, it will trigger the onblur event 
        $ ( " #email " ).blur ( function () {
             were re = /^\w+@\w+(\.\w+){1,3}$/;    
            if ( $(this).parent().find( "span" ).length > 0 ) {
                $(this).parent().find( "span" ).remove();    
            }
            if ( re.test( $(this).val() ) ) {
                $ ( The this ) .after ( " <span class = 'OK'> properly formatted </ span> " );
            }else {
                $(this).after( "<span class='error'>格式错误</span>" );
            }
        });
        $("#pwd").blur(function(){
            var re = /^\w{6,20}$/;
            if ( $(this).parent().find( "span" ).length > 0 ) {
                $(this).parent().find( "span" ).remove();    
            }
            if ( re.test( $(this).val() ) ) {
                $ ( The this ) .after ( " <span class = 'OK'> properly formatted </ span> " );
            }else {
                $(this).after( "<span class='error'>格式错误</span>" );
            }
        });
        $("#reg :submit").click(function(){
            $("#email").trigger("blur");
            $("#pwd").trigger("blur");
            if ( $("#reg").find(".error").length > 0 ) {
                return false;
            }
        });
    });    
    </script>
    <style>
    .ok {
        color:green;
    }
    .error {
        color:red;
    }
    </style>
</head>
<body>
    <form action="http://www.baidu.com" method="get" id="reg">
        <p class=emailParent>
            邮箱: <input type="text" name="email" id="email">            
        </p>
        <p>
            密码: <input type="text" name="pwd" id="pwd">
        </p>
        <p>
            <input type="submit" id="submit" value="注册" >
        </p>
    </form>    
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/MoonWorship/p/10990931.html