javascript和jquery实现用户登录验证
更新时间:2022年03月25日 10:39:02 作者:尼阿卡
这篇文章主要为大家详细介绍了javascript和jquery分别实现用户登录验证的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在上一篇文章Ajax实现异步用户名验证功能中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现。
一.用jquery的ajax实现的关键代码
实现如下
/*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET", url:"checkAccount.php?account="+$("#account").val(), dataTypes:"text", success:function(msg){ $("#accountStatus").html(msg); }, error:function(jqXHR) { alert("账号发生错误!") }, }); }); $("#password").blur(function(event) { $.ajax({ type:"GET", url:"checkPassword.php?", dataTypes:"text", data:"account="+$("#account").val()+"&password="+$("#password").val(), success:function(msg){ $("#passwordStatus").html(msg); }, error:function(jqXHR) { alert("密码查询发生错误!") }, }); }); }); */
二.用javascript实现的关键代码
实现如下
//javascript实现 function checkAccount(){ var xmlhttp; var name = document.getElementById("account").value; if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET","checkAccount.php?account="+name,true); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("accountStatus").innerHTML=xmlhttp.responseText; } } function checkPassword(){ var xmlhttp; var name = document.getElementById("account").value; var pw = document.getElementById("password").value; if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET","checkPassword.php?account="+name+"&password="+pw,true); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("passwordStatus").innerHTML=xmlhttp.responseText; } }
mysql和数据库部分跟上篇博文的一样没有改变,运行结果如下图
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
JavaScript reduce和reduceRight详解
这篇文章主要介绍了JavaScript reduce和reduceRight的高级用法详解的相关资料,需要的朋友可以参考下2016-10-10
最新评论