ajax jquery校验用户是否已经注册
服务端代码这里就不贴了
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校验用户是否已经注册的更多相关文章
- Struts2+AJAX+JQuery 实现用户登入与注册功能。
要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...
- Struts2+AJAX+JQuery 实现用户登入与注册功能
要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...
- 零基础学习java------35---------删除一个商品案例，删除多个商品，编辑（修改商品信息），校验用户名是否已经注册（ajax）
一. 删除一个商品案例 将要操作的表格 思路图 前端代码 <%@ page language="java" contentType="text/html; cha ...
- MVC3学习：利用mvc3+ajax检测用户是否被注册
假设用户名是保存在表Users中.关系模式为Users(Uid,UserName,PassWord) 可先利用mvc自带的模板生成Create页面. 将填写用户名的地方,由原来的 <div cl ...
- ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）
ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...
- MVC中处理表单提交的方式（Ajax+Jquery）
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- Ajax&jQuery教案总结
Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...
- jQuery校验
jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
- SSH实战 · AJAX异步校验
前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){ /*取到用户名输入框*/ var nametxt = documen ...
随机推荐
- 【C#/WPF】图像数据格式转换时，透明度丢失的问题
问题:工作中涉及到图像的数据类型转换,经常转着转着发现,到了哪一步图像的透明度丢失了! 例如,Bitmap转BitmapImage的经典代码如下: public static BitmapImage ...
- eql高可用部署方案
运行环境 服务器两台(后面的所有配置案例都是以10.96.0.64和10.96.0.66为例) 操作系统CentOS release 6.2 必须要有共同的局域网网段 两台服务器都要安装keepali ...
- FusionCharts JavaScript API - Events 全局事件处理
FusionCharts JavaScript API - Events 全局事件处理 Home > FusionCharts XT and JavaScript > API Refere ...
- ubuntu 12.10 默认安装php5-fpm无监听9000端口，nginx无法链接php5-fpm修正
升级php5的时候,发现nginx无法链接到php5,怀疑是php5端口的问题. netstat -an未发现监听9000端口. 查看/var/log/php5-fpm.log一切正常. 随后查看/e ...
- MongoDB（六）：使用C#代码连接并读取MongoDB数据库
在上篇文章中,讲解了MongoDB的基本操作,包括增.删.改.查,但是这些操作都是在命令行模式下进行的,这篇文章中讲解如何使用C#程序连接到MongoDB数据库,并且读取里面的文档. 一.新建项目 新 ...
- Linux mysql5.5
1.假设已经有mysql-5.5.10.tar.gz以及cmake-2.8.4.tar.gz两个源文件 (1)先安装cmake(mysql5.5以后是通过cmake来编译的) [root@ rhel5 ...
- 安装版的tomcat微信支付时报2字节的UTF-8序列的字节2无效
- Js加密与解密
<html><head><META HTTP-EQUIV="MSThemeCompatible" CONTENT="Yes"> ...
- 【转】WCF入门教程一[什么是WCF]
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
- Spring 4 官方文档学习（十一）Web MVC 框架之URI Builder
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-uri-building ...