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等于本地路径就行。
3.效果实现
1、输入用户名zhx、密码123456点击登录按钮。
对密码进行了正则校验,如果想对密码进行规则校验用相应的正则表达式即可。这里我为了方便演示密码只能为3位数字。
1、输入用户名zhx、密码123点击登录按钮。
跳转到登录成功页面。
总结
实现登录功能相关信息用户名、密码、手机号、邮箱等信息的校验,尽可能都要在页面输入的时候进行校验,尽可能避免在后端进行校验,减少与后端的交互频率。