加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 00:51:56 所属栏目:百科 来源:网络整理
导读:服务端代码这里就不贴了 html代码比较简单,需要自行引入jquery库 body请输入用户名:input type="text" id="userName" class="userText"/ input type="button" value="校验" id="verifyButton" /div id="result"/div/body js代码 /* * 在页面装载完成时注册

服务端代码这里就不贴了

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读