Jquery+Css+Html实现登录用户和密码进行前端校验以及用户登录功能

Jquery+Css+Html实现登录用户和密码进行前端校验以及用户登录功能文章目录Jquery+Css+Html实现登录用户和密码进行前端校验以及用户登录功能前言一、什么是Jquery？二、什么是Css？三、什么是Html？四、Jquery前端代码实现1.创建登录页面2.创建登录成功的页面3.效果实现总结前言应用场景：任何程序的登录都可实现，对用户名、密码记性前端校验，或者手机号、邮箱等信息进行

灰太狼yyds

6608人浏览 · 2022-01-09 15:40:49

灰太狼yyds · 2022-01-09 15:40:49 发布

Jquery+Css+Html实现登录用户和密码进行前端校验以及用户登录功能

前言

应用场景：任何程序的登录都可实现，对用户名、密码记性前端校验，或者手机号、邮箱等信息进行校验。

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是Jquery？

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。(百度百科)。

二、什么是Css？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 (百度百科)。

三、什么是Html？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。。(百度百科)。

四、Jquery前端代码实现

先要导入jquery.js文件，使页面具有jquery的功能。这个功能需要两个页面，一个登陆页面，还有就是登录成功的页面(需要文件可流私信下班看到会回)
在这里插入图片描述

1.创建登录页面

创建.txt文本，然后写上代码保存，然后将文本后缀改为.html保存，使用浏览器打开即可

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 登录页面 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <!--导入jquery库-->
  <script src='jquery.js'></script>
  <script>
		//页面加载时 让id为uid的对象获得焦点
		$(document).ready(function(){
			//var oInput = $("#uid");
			//oInput.focus();//获得焦点
			// dom对象与jquery对象之间转换  原生js抓取和生成的对象称为dom对象，通过jquery创建和抓取的对象称为jquery对象，只有jquery对象可以调用jquery中方法
			//var oInput = document.getElementById("uid");
			//var oInput = $("#uid");
			//将dom对象转为jquery对象(穿马甲)
			//oInput = $(oInput);
			//console.log(oInput.val());

			//将jquery对象转为dom对象
			//oInput = oInput[0];
			//console.log(oInput.value);

			var oInput = $("#uid");
			oInput.focus();
		});

		function check()
		{
			//得到uid的值
			var uid = $("#uid").val();
			if(uid == "")
			{
				alert("用户ID必须填写!");
				$("#uid").focus();
				return ;
			}
			else
			{
				//校验密码是否为三位数字
				var reg = new RegExp("^\\d{3}$");
				var flag = reg.test($("#upass").val());
				if(flag==false)
				{
					alert("密码必须是3位数字");
					$("#upass").focus().select();
				}
				else
				{
					//提交表达
					$("#thisform").attr({action:"result.html",method:"post"}).submit();
				}
			}
		}	
  </script>
 </HEAD>

 <BODY>
	<form id='thisform'>
		<TABLE border='1px' width='500px' align='center'>
		<TR>
			<TD>用户ID:</TD>
			<TD><input  id='uid' /></TD>
		</TR>
		<TR>
			<TD>用户密码:</TD>
			<TD><input id='upass' /></TD>
		</TR>
		<TR>
			<TD colspan='2' align='center'>
				<input type='button' value="登录" onclick='check()'/>
			</TD>
			
		</TR>
		</TABLE>
	</form>
 </BODY>
</HTML>

2.创建登录成功的页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 登录成功的页面 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
	欢迎您，登录成功。。。。。
 </BODY>
</HTML>

1、标签 <script></script>体里面要写js的代码,逻辑处理的代码。
2、标签 <style></style>体里面要写css的代码，页面展示的样式。
3、标签 <BODY></BODY>体里面主要是展示页面的内容。
4、标签 <HEAD></HEAD>体里面主要是标题头格式区。
5、标签 <HTML></HTML>体是整个页面的区域。
6、标签 <script src="jquery.js"></script>是引入jquery.js文件src等于本地路径就行。