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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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图片上传类带图片显示
2006/11/25 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php 团购折扣计算公式
2011/11/24 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Python入门篇之文件
2014/10/20 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python sys模块常用方法解析
2020/02/20 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python如何转换字符串大小写
2020/06/04 Python
Python实现一个论文下载器的过程
2021/01/18 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
销售个人求职信范文
2014/04/28 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年统战工作总结
2014/12/09 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android