jQuery实现验证用户登录


Posted in jQuery onDecember 10, 2019

前言

前面的博客对jQuery有所介绍,所以接下来的这几篇博客是对jQuery的介绍,具体介绍方式是用例子呈现给大家。

内容

显示效果

输入之前

jQuery实现验证用户登录

输入之后点击校验

jQuery实现验证用户登录

废话少说,先上代码:

HTML代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery实战1-用户名校验</title>
  <script src="script/jquery-1.8.2.js"></script>
  <script src="script/userVerify.js"></script>
  <link href="CSS/jQuery1CSS.css" rel="stylesheet" />
</head>
<body>
  请输入用户名:<input type="text" id="userName" class="userText" />
  <input type="button" name="校验" value="校验" id="verifyButton" />
  <div id="result">
  </div>
</body>
</html>

CSS代码:

.userText {
  border:1px solid #f00;
  background-image:url(D:\js\验证用户名\验证用户名\img\userVerify.gif);
  background-repeat:repeat-x;
  background-position:bottom;
}

JavaScript代码:

//需要通过JavaScript代码来做的两件事情
//1.button被按下的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接收服务器返回的数据,填充到我们预留的div中,这样用户就可以看到结果
//2.文本框上,用户按键之后,需要判断文本框中的内容是否为空,如果不为空,红色的边框和背景图就应该取消,否则保留
//需要在页面中完成注册上的这些工作
$(document).ready(function () {
 //这里面的内容就是页面装载完成后需要执行的代码
 var userNameNode = $("#userName");
 //需要找到button按钮,注册事件
 $("#verifyButton").click(function () {
  //获取文本框的内容
  var userName = userNameNode.val();
  //将这个内容发送给服务器端
  if (userName == "") {
   alert("用户名不能为空");
  } else {
   $.get("http://127.0.0.1:8080/jQuery/UserVerify?userName = " + encodeURI(encodeURI(userName)),userName, null, function (response) {
     //接收服务器端返回的数据,填充到div中
     $("#result").html(response);
    });
  }
 });
 //需要找到文本框,注册事件
 userNameNode.keyup(function () {
  var value = userNameNode.val();
  if (value == "") {
   //让边框变成红色,并且带背景图
   userNameNode.addClass("userText");
  }else{
   //去掉边框和背景图
   userNameNode.removeClass("userText");
  }
 });
});

大神们一看代码就立马知道,上面代码中的知识点有那些,我在这里总结了一小部分,希望大神能提出一些宝贵的意见。

总结

HTML负责页面内容,CSS负责页面样式,JavaScript负责页面行为

HTML知识点:

  1. HTML中应该有DOCTYPE来告知浏览器的渲染显示方式。
  2. 可以先定义div或span节点用于以后显示服务器返回数据。

CSS知识点:

  1. border属性可以控制页面元素的边框。
  2. background-*可以控制背景图,以及背景图的位置,重复显示的方式。
  3. 可以通过#idname或 .classname的方式来个指定的html节点定义样式。

JavaScript知识点:

  1. 可以通过#idname或 .classname的方式来个指定的html节点定义样式。
  2. 可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法。
  3. 可以通过$()方法来获得页面的指定节点,参数是某种css的选择器。
  4. 可以在$()方法返回的jQuery对象上执行各种jQuery的方法来获取数据,定义事件,执行操作。
  5. val()方法可以获得节点的value属性值。
  6. html()方法可以设定某个节点中的html内容。
  7. click()方法可以响应鼠标点击事件。
  8. keyup()方法可以响应键盘弹起的事件。
  9. $.get()方法可以和服务器端进行get方式的交互,注册的callback方法会再数据回来的时候被调用,这个方法会接收到代表服务器端返回数据的一个纯文本的参数。
  10. addClass()removeClass()方法可以给某个节点添加或删除一个class。
  11. 发送给服务器端的数据在JavaScript中做的两次encodeURL,然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题。

end

谢谢您的阅读!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
You might like
PHP 学习路线与时间表
2010/02/21 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python多进程分块读取超大文件的方法
2016/04/13 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
django2 快速安装指南分享
2018/01/05 Python
python numpy 按行归一化的实例
2019/01/21 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Java servlet面试题
2012/03/04 面试题
劲霸男装广告词
2014/03/21 职场文书
租房协议书
2014/04/10 职场文书
初中英语课后反思
2014/04/25 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL