【JQuery】user name verification

实现的功能：

在不进行页面刷新的前提下，对用户输入用户名进行验证，并做出相应的提示！

在用户在文本框中输入数据的时候，文本框红色的边框消失；否则，红色文本框出现！

HTML代码

<html>
	<head>
		<title> user</title>
		<meta http-equiv="Content-type" conten="text/html;charset=UTF-8">
		<link type="text/css" rel = "stylesheet" href="user.css" />
		<script type = "text/javascript" src="jquery-3.3.1.min.js"> </script>
		<script type ="text/javascript" src="user.js"> </script>
	</head>
    
	<body> 
		用户名:	<input type="text" id="userName" class="userText"/> 
                <input type="button" value = "验证" id="verufyButtion">
	</body>
</html>

CSS代码

.userText{
	border : 1px solid red;
}

JS代码

$(document).ready(function(){
	
	$("#verufyButtion").click(function(){
		//alert("finish");
        var username=$("#username").val();
        if(username==""){
            alert("用户名不能为空");
        }
        else
        {
            get("网址?userName="+encodeURI(encodeURI(userName)),null,function(response){
                $("#result").html(reponse);
            });
        }
	});
            
    $("#userName").keyup(function(){
        var value = $(this).val();
        if(value==""){
            $(this).addClass("userText");
        }
        else{
            $(this).removeClass("userText");
        }
    });
	
});

要点：

HTML中可以通过DOCTYPE来告知浏览器的渲染显示方式
可以先定义div或span节点用于以后显示服务器返回数据
border可以控制页面元素的边框
可以通过#idname或.classname的方式来制定html节点定义样式
可以通过$（doucument）.ready(function(){})的方式来定义页面装载完成时，需要执行的方法
可以通过$（）方法来获取界面的制定节点，参数是某种CSS的选择器
可以在$()方法返回jquery对象上执行各种JQuery的方法来获取数据，定义事件，执行操作
发送个服务器端的数据在javascript总做两次encodeURI，然后在服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文乱码的问题

方法：

方法名	作用
val()	获取节点的value属性值
html()	设定某个节点中的html内容
click()	响应鼠标点击事件
keyup()	响应键盘弹起事件
$.get()	可以和服务器端进行get方式的交互，注册的callback方法会在数据回来的时候被调用这个方法会接受代表服务器端返回数据的一个纯文本的参数
addclass()	给某个节点添加class
removeclass()	给某个节点删除class

简做总结，感谢大家认真阅读和点赞鼓励！

【JQuery】user name verification

实现的功能：

猜你喜欢