html前端登录验证

最新推荐文章于 2023-05-24 14:11:10 发布

weixin_30566111

最新推荐文章于 2023-05-24 14:11:10 发布

阅读量919

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/MoonWorship/p/10990931.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>

转载于:https://www.cnblogs.com/MoonWorship/p/10990931.html

weixin_30566111

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html前端登录验证

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="../jquery-1.7.2/jquery.min.js"></scr...
复制链接

扫一扫