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

<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(){

Extra close brace or missing open brace
("input[name=password]").blur(function(){

checkpassword();

}).focus(function(){

$("span").eq('1').html("");

})


$("button").click(function(){

if(checkname()){

Extra open brace or missing close brace
("span").eq('0').html("用户名已存在").css("color", "red");

}

})

}

if(checkpassword()){

Extra open brace or missing close brace
("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里修改值没有效果,所以就暂时先放一下,问问老师,嘿嘿。

本文作者:博主:     文章标题:通过jquery实现用户注册验证
本文地址:https://zjzdmc.top/jsfx/59.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 20 日 09 : 18 AM
如果觉得我的文章对你有用,请随意赞赏