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

谢谢您的阅读！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • S2SH整合JQuery+Ajax实现登录验证功能实现代码

    不多说了,上码 action 复制代码 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction ext

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

  • 使用jQuery如何写一个含验证码的登录界面

    使用jQuery如何写一个含验证码的登录界面

    一个包含用户名,密码,验证码的简单的登陆界面,如下图所示: 首先是 HTML 代码: <div id="divID"> <div style="background-color:transparent;"> <form id="ff" method="post"> <ul class="reg-box"> <li> <label for=&q

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • 使用jQuery,Angular实现登录界面验证码详解

    使用jQuery,Angular实现登录界面验证码详解

    写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波. 最终实现的效果: 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作. 整体思路. 1.取四位随机数 2.赋值到验证码的input框里.

  • jquery登录的异步验证操作示例

    本文实例讲述了jquery登录的异步验证操作.分享给大家供大家参考,具体如下: //定义一个json var validate = { username : false, pwd : false, pwded : false, verify : false, loginUsername : false, loginPwd :false } //存储错误信息 var $msg = ""; //验证注册表单 $(function(){ //获取表单对象 var register = $('

  • javascript和jquery分别实现用户登录验证

    javascript和jquery分别实现用户登录验证

    在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

  • jQuery实现验证用户登录

    jQuery实现验证用户登录

    前言 前面的博客对jQuery有所介绍,所以接下来的这几篇博客是对jQuery的介绍,具体介绍方式是用例子呈现给大家. 内容 显示效果 输入之前 输入之后点击校验 废话少说,先上代码: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="

  • jQuery+ajax实现用户登录验证

    本文实例为大家分享了jQuery+ajax实现用户登录验证的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block;

  • 使用AJAX（包含正则表达式）验证用户登录的步骤

    使用AJAX（包含正则表达式）验证用户登录的步骤

    我们来分一下步骤吧: 1.HTML代码,页面先写出来: 2.正则表达式验证输入的用户名密码是否正确,失去焦点验证 3.Ajax异步提交 4.servlet这是后台处理代码获取数据并对比响应,然后跳转成功页面 效果图: 结构: 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "

  • PHP+Ajax验证码验证用户登录

    用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php:  生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件 下面一一解析: yz.php 文件 <?php session_start(); //生成验证码图 Header("Content-type: image/PNG"); //长与

  • spring aop action中验证用户登录状态的实例代码

    最近在学习ssh框架时,照着网上做了一个商城系统,之前在一些需要用户存在的操作中,都是在每一个action中写重复的代码,这样做现在想起来并不好,想起了spring的aop,于是想通过aop来给每个需要用户操作的Action验证用户登录状态. 想法是这样的: 1. 用户登录时把userId放入session中 2. 通过spring 写一个advice来获取session中的userId,判断用户登录状态,如果userId不符合,则抛出自定义异常 3. 通过struts中配置来捕获异常,跳转界面

  • vue-router beforeEach跳转路由验证用户登录状态

    使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的

  • Go WEB框架使用拦截器验证用户登录状态实现

    目录 wego拦截器 main函数 登录逻辑 登录拦截器的实现 index页面的实现 wego拦截器 wego拦截器是一个action(处理器函数)之前或之后被调用的函数,通常用于处理一些公共逻辑.拦截器能够用于以下常见问题: 请求日志记录 错误处理 身份验证处理 wego中有以下拦截器: before_exec :执行action之前拦截器 after_exec :执行action之后拦截器 本文用一个例子来说明如何使用拦截器来实现用户登录状态的判定.在这个例子中,用户访问login_get来

  • PHP+jQuery+Ajax实现用户登录与退出

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v

  • Asp.net mvc验证用户登录之Forms实现详解

    Asp.net mvc验证用户登录之Forms实现详解

    这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_Start文件夹下面有一个FilterConfig.cs,在这个文件中可以注册全局的过滤器.我们在文件中添加AuthorizeAttribute过滤器如下: public class FilterConfig { public static void RegisterGlobalFilters(Glo

  • .net MVC使用Session验证用户登录（4）

    用最简单的Session方式记录用户登录状态 1.添加DefaultController控制器,重写OnActionExecuting方法,每次访问控制器前触发 public class DefaultController : Controller { protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); va

随机推荐