html前端登录验证 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-1.7.2/jquery.min.js"></script>
    <script>
    $(function(){
        //onblur: 光标离开控件，会触发onblur事件
        $("#email").blur(function(){
            var re = /^\w+@\w+(\.\w+){1,3}$/;    
            if ( $(this).parent().find( "span" ).length > 0 ) {
                $(this).parent().find( "span" ).remove();    
            }
            if ( re.test( $(this).val() ) ) {
                $(this).after( "<span class='ok'>格式正确</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() ) ) {
                $(this).after( "<span class='ok'>格式正确</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>

 

posted @ 2019-06-08 16:05  MoonWorship  阅读(5077)  评论(0)    收藏  举报