javascript和jquery实现用户登录验证


Posted in Javascript onMay 04, 2016

在上一篇文章//3water.com/article/83504.htm中,用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和jquery实现用户登录验证

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
React-router4路由监听的实现
Aug 07 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 #Javascript
纯JS代码实现气泡效果
May 04 #Javascript
DWR中各种java方法的调用
May 04 #Javascript
js实现div在页面拖动效果
May 04 #Javascript
JS功能代码集锦
May 04 #Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 #Javascript
浅析Bootstrap组件之面板组件
May 04 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
redux.js详解及基本使用
2019/05/24 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
儿童编程python入门
2018/05/08 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
自荐信的格式
2014/03/10 职场文书
幼儿评语大全
2014/04/30 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
个人德育工作总结
2015/03/05 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书