jquery 简单的登录验证

最新推荐文章于 2025-06-12 11:32:11 发布

Suoz

最新推荐文章于 2025-06-12 11:32:11 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery 表单验证

本文链接：https://blog.youkuaiyun.com/Suoz_wly0710/article/details/53344142

jQuery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了使用jQuery进行简单的登录验证，当用户未输入或用户名不存在时，通过CSS和jQuery动画实现滑动框淡入淡出的提示效果。在实现过程中，博主遇到了关于setTimeout、delay、animate的使用问题，以及如何处理用户连续点击登录按钮的场景。同时，博主对于:checked选择器和disabled属性的使用还存在一些疑问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分：

<style type="text/css">
    #waimian{
        width: 375px;
        height: 500px;
        background-color: yellow;
        position: relative;
        z-index: 0;
    }
    #info{
        width: 375px;
        height: 40px;
        background-color: black;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: 280px;
        opacity: 0;
        filter: alpha(opacity=0);
        color: red;
        z-index: 2;
    }
    #hello{
        width: 375px;
        height: 200px;
        background-color: green;
        position: absolute;
        z-index: 1;
        top: 120px;
    }
</style>

jquery部分：

<script type="text/javascript">
    $(function(){
            $('#sub').click(function(){
                $('#sub').attr("disabled",true);
                var $username = $('#username').val().trim();
                var $password = $('#password').val().trim();
                $('#info').html('').css({
                    "top" : "280px",
                    "display" : "block"
                });
                if($username == '' || $password == ''){
                    error('请输入用户名和密码');
                }else if(!$('.chose').is(":checked")){
                    error('请选择用户身份');
                }else{
                    var $chose = $(':checked').val();
                    alert($chose);
                }
            });
            function error(message){
                $('#info').stop().animate({
                    top : "120px",
                    opacity : "0.6"
                },function(){
                    $(this).html(message);
                }).delay(1500).animate({
                    opacity : "0"
                },function(){
                    $('#sub').attr('disabled',false);
                });
            }
    });
</script>

HTML部分：

这里写图片描述

实现：

类似于qq登录，在用户没有输入或者该用户不存在的时候，滑动框淡入向上滑动提示信息，过了1500ms再淡出。

效果：

这里写图片描述

遇到的问题：

1.一开始想到用定时器setTimeout()实现，后来找到delay()函数代替，注意该函数只能用于动画效果的延迟。
2.延迟之后，如果我在点击登录，不会再出现滑动框，原因是因为我第一次点击使用了animate(),把top位置移动到120px的位置，因此我应该在点击函数的后面加上初始化，让top位置在点击之前始终保持在280px的位置。
3.第一次点击按钮之后，我想要阻止用户连续点击，我就用了disabled:true,但是延迟之后，第一次用的是delay(1500).fadeOut()淡出滑动框，但是如果我想保证滑动框淡出之后，用户可以点击登陆按钮，则我将fadeOut()换成了animate，在它的回调函数里面设置disabled:false
4.感觉自己对:checked选择器还是不太熟悉，以及disabled，是在attr里面用的，而不是css，并且true/false，无需加引号。