Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > 通过jquery实现用户注册验证

通过jquery实现用户注册验证

浏览: 作者:Datehoer 发布日期:2020-11-22 13:10:40 来源: 原创
最近在准备考证,再加上要改版一下网站,加一些用户交互功能之类的,并且其实毕竟做东西就是要做好嘛。
所以就在尝试用户注册功能,其实主要还是学习的案例里面有这个通过jQuery来实现简单的用户注册功能,然后虽然没怎么仔细听,但是还是会个大概,再加上学了一上午有点小困,所以敲个代码来刺激一下自己。
其实JavaScript也可以实现这个效果的,只不过相对要麻烦一些,如果有需要的话,我可能会写一个通过JavaScript来实现用户注册的文章,还是看需求,哈哈。
其实这个用户注册还是要通过后台进行数据验证的,但是php学的不是很精,所以只是简单的验证了一下用户注册和密码过于简单。
苦命,写文章写到一半,然后感觉会有一个小问题出现,然后去测试了一下,发现确实有,之后修改了半天!!!
不过目前没找到啥方法解决!好悲惨!---->目前在问老师了,就是想要实现一个判断,之后会输出相应的提示框。
上下效果图:JavaScript实现注册效果
就是判断你的用户名是否符合格式,密码是否符合规则,有没有重命名,密码是不是太简单了,很简单的一个小例子,不过很综合,哈哈。
上下代码:

<div>
        <input type="text" name="username"><span></span>
        <input type="password" name="password"><span></span>
        <button>注册
        </button>
    </div>
<script src="../dmo/jquery.min.js"></script>
    <script>
        registerrule = /^[a-zA-z0-9_-]{4,16}$/; //检测用户名格式的正则 $表示不能包含其他字符
        passwordrule = /^[a-zA-z0-9_-]{6,16}$/; //检测用户密码
        $(function(){
            
            function checkname(){
                valname = $("input[name=username]").val();
                if(valname == ""){
                    $("span").eq('0').html("用户名未填写").css("color", "red");
                    return false;
                }
                else if (registerrule.test(valname)){
                    $("span").eq('0').html("用户名格式正确").css("color", "green");
                    return true;
                }
                else {
                    $("span").eq('0').html("用户名格式不正确").css("color", "red");
                    return false;
                }
            }
            function checkpassword(){
                valpw = $("input[name=password]").val();
                if(valpw == ""){
                    $("span").eq('1').html("密码未填写").css("color", "red");
                    return false;
                }
                else{
                    $("span").eq('1').html("密码格式正确").css("color", "green");
                    return true;
                }
            }
            $("input[name=username]").blur(function(){
                checkname()
}).focus(function(){
                $("span").eq('0').html("");
            })
            $("input[name=password]").blur(function(){
                checkpassword();
}).focus(function(){
                $("span").eq('1').html("");
            })
            
            $("button").click(function(){
if(checkname()){
                        $.post("./jiancename.php",{name:valname},function(data){
                            if(data == "yes"){
                                $("span").eq('0').html("用户名已存在").css("color", "red");
                            }
                        })
}
                    if(checkpassword()){
                        $.post("./jiancepsw.php",{psw:valpw},function(data){
                            if(data == "yes"){
                                $("span").eq('1').html("密码太简单了,请换一种密码").css("color", "red");
                            }
                        })
}
            })
        })
    </script>

 


差不多就是这些,因为注释有点多,就自己剪了一下,如果报错记得告诉我。
思路很简单,就是通过input来输入数据,之后通过jquery来进行判断,当然这里的判断是一些比较简单的判断,比如果命名是否符合规则,密码是否符合规则等等,不过其实密码应该不需要的,不过当时还是加上了。然后再通过php后台来进行数据的判断,是否重命名,是否符合简单密码等等吧,不过其实这个简单密码没必要加在这里,可以之前在前面加上判断就好了,可以直接删除掉这段。
然后php文件就是

<?php
    if($_POST["name"] == "aaaaa"){
        echo "yes";
    }
    else {
        echo "no";
    }
这个,之所以没有?>结束符号,是因为上课的老师讲如果是一个单独的php文件,里面全是php代码的话,不需要结束符号,我觉得应该是如果你只是一个单独的php文件的话,那么你后期再加代码直接往上加就行了,而不需要先把结束符号往后回车几下。
说一下这个
$("span").eq('1').html("密码太简单了,请换一种密码").css("color""red");
这个就是获取子类的方法,通过$("span")选中span标签,然后通过eq来遍历一下这个标签,因为一共就两个,所以选择第二个的话就是1了,之后再用html方法来修改显示的文字,css方法来修改样式。
前面的代码没什么难度,也就是这个获取第二个字类稍微有点难度。
再说下我想加的效果,就是通过判断,是否名字和密码都符合规则,如果符合的话就出现一个弹窗,本来后面是加的一个if判断,前面命名一个变量即可,但是后来发现你在jquery里修改值没有效果,所以就暂时先放一下,问问老师,嘿嘿。
如果有什么问题可以在评论区留言询问,我会在看到的第一时间进行回答的。



版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/59.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!