服务端代码这里就不贴了

html代码比较简单,需要自行引入jquery库

<body>
请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
<div id="result"></div>
</body>

js代码

/*
* 在页面装载完成时注册上这些工作
* */
$(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"); }
});
});

css样式,目的是让文本框中没有内容的时候边框为红色并下方有红色波浪

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

ajax jquery校验用户是否已经注册的更多相关文章

  1. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  2. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  3. 零基础学习java------35---------删除一个商品案例,删除多个商品,编辑(修改商品信息),校验用户名是否已经注册(ajax)

    一. 删除一个商品案例 将要操作的表格 思路图  前端代码 <%@ page language="java" contentType="text/html; cha ...

  4. MVC3学习:利用mvc3+ajax检测用户是否被注册

    假设用户名是保存在表Users中.关系模式为Users(Uid,UserName,PassWord) 可先利用mvc自带的模板生成Create页面. 将填写用户名的地方,由原来的 <div cl ...

  5. ajax实现注册用户名时动态显示用户名是否已经被注册(1、ajax可以实现我们常见的注册用户名动态判断)(2、jquery里面的ajax也是类似我们这样封装了的函数)

    ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...

  6. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  7. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  8. jQuery校验

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  9. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

随机推荐

  1. System类及其getProterties( )和getProperty( )

    System这个类来源: public final class System extends Object System类包含若干个有用的类字段和方法,而且不能被实例化.System类提供的工具包括标 ...

  2. 关于Java的Properties类

    Properties类 先来学习下Properties类吧. Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. ...

  3. sqlserver被锁的表以及如何解锁

    查看sqlserver被锁的表以及如何解锁   查看被锁表: select   request_session_id   spid,OBJECT_NAME(resource_associated_en ...

  4. Server 2008作为打印服务器的四大错误解决方案

    http://os.51cto.com/art/201004/197322.htm http://os.51cto.com/art/201004/197322_1.htm http://os.51ct ...

  5. CentOS 6编译安装yum和配置常用的yum源

    安装环境:VPS,CentOS 6 + devel包 一.安装相应的软件 1.安装python 下载Python源码包 [root@akinlau ~]# wget http://www.python ...

  6. mybatis 一对多关系

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  7. golang第三方日志包seelog配置文件详解

    开发任何项目,都离不开日志,配好自己的项目日志输出,往往是开发项目的前提.在golang中,seelog应该是比较有名的日志处理包了,功能非常强大,seelog官方文档 一.seelog主要功能下面我 ...

  8. C#程序运行流程

    我们写好的C#代码操作系统是如何能识别呢,我们都知道操作系统只能认识二进制 机器代码,下面用图来表示 因为C#是安全的托管代码 同时CLR会在内存中创建应用程序域 托管代码:被CLR管理的代码 非托管 ...

  9. socket和http

    套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...

  10. 弄明白html、css3、js这个问题。。。