欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ajax jquery校验用户是不是已经注册

更新时间: 2014-01-05 01:54:14 责任编辑: Author_N1

 

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;
}


上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:54:14
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2835/
本文WWW.DOC100.NET DOC100.NET版权所有。