JQuery---用户名校验

最新推荐文章于 2023-11-14 20:16:03 发布

一路向前！

最新推荐文章于 2023-11-14 20:16:03 发布

阅读量643

点赞数

分类专栏： -----JQuery

本文链接：https://blog.youkuaiyun.com/ytm15732625529/article/details/53164250

版权

-----JQuery 专栏收录该内容

6 篇文章

订阅专栏

实例情境

用户名校验：

服务器端思路分析：

对指定用户名返回用户名已经存在，对其他用户名，返回用户名可以使用。

输入：用户名（约定参数为userName）

输出：提示信息（一段纯文本的内容，包含输入的用户名）例：可以使用用户名【admin】注册

主要代码：

UserVerify.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战1-用户名校验</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/userVerify.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/userVerify.js"></script>
	</head>
	<body>
		请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
		<div id="result"></div>
	</body>
</html>

userVerify.js:

/*
*需要通过JavaScript代码来做两件事
*1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，
填充到我们预留的div中，这样用户就可以看到结果
*2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就该取消，否则保留
*/
/*
*需要在页面装在完成时注册上这些工作
*/
$(document).reday(function(){
	//这里面的内容就是页面装载完成后需要执行的代码
	var userNameNode=$("#userName");
	//需要找到button按钮，注册事件
	$("#verifyButton").click(function(){
		//获取文本框的内容
		var userName=userNameNode.val();
		//将这个内容发送给服务器端
		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");
		}
	});
	
})'

userVerify.css:

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