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平滑滚动到顶部插件使用详解
May 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
使用jquery实现轮播图效果
Jan 02 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
浅析python 字典嵌套
2020/09/29 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
自我鉴定三原则
2014/01/13 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
招标承诺书
2014/08/30 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
科技活动周标语
2014/10/08 职场文书
颐和园英文导游词
2015/01/30 职场文书
保安辞职信范文
2015/02/28 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技