jQuery简单入门示例之用户校验demo示例

171 阅读 0 评论 113 点赞

我是靠谱客的博主勤恳银耳汤，最近开发中收集的这篇文章主要介绍jQuery简单入门示例之用户校验demo示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了jQuery简单入门示例之用户校验。分享给大家供大家参考，具体如下：

jQuery在小编的世界中，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库，百度百科对JQuery的介绍比较详细，小伙伴可以东东自己可耐的小爪子，上网进行搜索，说不定，有意外惊喜哦，今天这篇文章，小编简单的介绍一下JQuery的一些基本知识，然后小编在集合实例，讲解一下在具体的应用过程中，我们的JQuery又是如何在她的舞台熠熠生辉......

通过JQuery的学习，我们可以学到哪些知识nie，比如我们会学会JQuery的API函数的使用，以及简单的实例的实现方法还有一些html、css、js的小知识，作为明星级的框架JQuery，都有谁在使用nie，比如我们熟悉的Goole、IBM、ORACLE、DELL、土豆等等，都在使用JQuery做前端的开发，我们的JQuery是不是很火爆。

介绍完了JQuery的一些基本知识以后，接下来，小编简单来编写一个实例---用户名校验，首先，我们来分析一下这个小例子的代码思路，首先服务器端思路分析，对指定用户名返回用户名已经存在，对其他用户名，返回用户名可以使用；输入：用户名；输出：提示信息，接着我们来编写代码，编写代码之前，小编简单对这个小例子的目录进行一个简单的描述：我们需要一个html的文件，我们取名叫做UserVerify，除此之外，我们需要写css和js的文件，现在比较流行。遵循web标准来看，我们需要把css文件和js文件单独放置，便于管理，我们需要分别建立css文件和js文件，除此之外，应用当中可能要用到图片，所以我们单独建立一个images文件，接着，我们开始编写代码：

有一个页面文件，先来编辑html，保证内面内容通过html标签表示出来，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>JQuery实战1-用户名校验</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/userVerify.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/userVerify.js"></script>
  </head>
  <body>
    请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
    <div id="result"></div>
  </body>
</html>

接着，在css文件目录下建立一个css文件，编写css的代码：

.userText {
  /*控制文本框的边框是红色的实线*/
  border: 1px solid red;
  background-image: url(../images/userVerify.gif);
  background-repeat: repeat-x;
  background-position: bottom;
}

相应的，在js中我们也要建立两个文件，一个jquery一个userVerify，鉴于jquery的代码较多，所以小编已经上传相关资源，有需要的小伙伴可以到该链接下载，接着，我们来编写userVerify的代码，来给整理页面添加行为能力：

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

我们来看一下运行效果：

小例子，小编就演示到这里，通过这个小例子，我们知道html负责页面内容，css负责页面样式，js负责页面行为，html中应该有doctype来告知浏览器的渲染显示方式，border属相可以控制页面元素的边框，background-***可以控制背景图，以及背景图的位置，重复显示的方式等等，这些小知识点，我们都可以在这个小例子得到充分的认识，补充一个小的知识点，发送给服务器端的数据在js中做连词encodeURL，然后再服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文中的乱码问题。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。