服务端代码这里就不贴了

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. 【WPF/C#】测试下载文件(图片)

    需求:界面上有一个按钮,点击后联网下载一张PNG图片,保存到本地指定路径. 重要参考: http://stackoverflow.com/questions/24797485/how-to-downl ...

  2. C语言 · 十六进制转八进制

    基础练习 十六进制转八进制   时间限制:1.0s   内存限制:512.0MB        锦囊1: 使用二进制.   问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的 ...

  3. Linux 进程间通信(posix消息队列 简单)实例

    Linux 进程间通信(posix消息队列 简单)实例 详情见: http://www.linuxidc.com/Linux/2011-10/44828.htm 编译: gcc -o consumer ...

  4. ExtJs 通过分析源代码解决动态加载Controller的问题

    通过分析源代码解决动态加载Controller的问题 最近在研究ExtJs(4.2.0)的MVC开发模式,具体Extjs的MVC如何使用这里不解释,具体参见ExtJs的官方文档.这里要解决的问题是如何 ...

  5. java——常用类的总结

    package test; import java.util.ArrayList; import java.util.HashMap; import java.util.Set; public cla ...

  6. svn删除项目目录

    cmd svn delete -m "质控" svn://192.168.0.253/repos1/质控

  7. Jquery同时绑定多个事件

    //JQ 同时绑定多个事件 $("div.div_grren a img").bind({ mouseover:function(){ $(this).attr('src',bor ...

  8. 判断radiobutton是否被选中

    <tr> <td class="label">是否显示:</td> <td> <?php if($cates_data[0][ ...

  9. 第三百一十五节,Django框架,CSRF跨站请求伪造

    第三百一十五节,Django框架,CSRF跨站请求伪造  全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...

  10. [转载]php设计模式之单例、多例设计模式

    单例(Singleton)模式和不常见的多例(Multiton)模式控制着应用程序中类的数量.如模式名称,单例只能实例化一次,只有一个对象,多例模式可以多次实例化. 基于Singleton的特性,我们 ...