HTML用户登录界面（表单验证）JavaScript简单运用

最新推荐文章于 2024-03-12 11:37:27 发布
最新推荐文章于 2024-03-12 11:37:27 发布
阅读量2.4w 收藏 209
点赞数 20
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuyao_Xu/article/details/100025014
版权

实训第三天

<html>
	<head>
		<title>
			用户登录界面
		</title>
		<meta charset="utf-8">
		<script>
			function checkUser(){
				var username = document.getElementById("username").value;//文本框中的值，var是各种变量类型的集合
				if(username == ""){
					document.getElementById("tishiUsername").innerHTML ="用户名不能为空";
					return;//必须要写return跳出
				}else{
					document.getElementById("tishiUsername").innerHTML ="";
				}
				
				var pwd = document.getElementById("pwd").value;
				if(pwd == ""){
					document.getElementById("tishiPwd").innerHTML ="密码不能为空";
					return;
				}else{
					document.getElementById("tishiPwd").innerHTML ="";
					var reg = /^[0-9]{6}$/;
					if(!reg.test(pwd)){
						document.getElementById("tishiPwd").innerHTML ="密码只能为6位数字";
						return;
					}
				}
				
				var repwd = document.getElementById("repwd").value;
				if(pwd != repwd){
					document.getElementById("tishiRepwd").innerHTML ="两次密码不一样";
					return;
				}
				
				var email = document.getElementById("email").value;
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])/;//邮箱格式包括_-两个符号
				if(!reg.test(email)){
					document.getElementById("tishiEmail").innerHTML ="邮箱格式错误";
					return;
				}
				
				window.location.href="轮播图.html";//全部通过则定位至链接
			}
		</script>
		<style>
			<!--span常用来修饰单独字符-->
			span{
				color:red;
			}
		</style>
	</head>
	<body>
		
		<!--
			用户名，密码，重复密码不可为空
			密码重复密码相同
			密码为六位
			邮箱有@
			条件全满足则跳转
		-->
		
		<form action="javascript01.html" method="get" align="center" onsubmit="return false">
			<p>
				账号：
				<input name="username" id="username">
				<span>*</span>
				<span id="tishiUsername"></span>
			</p>
			<p>
				密码：<input type="password" name="password" id="pwd">
				<span>*</span>
				<span id="tishiPwd"></span>
			</p>
			<p>
				确认：<input type="password" name="repwd" id="repwd">
				<span>*</span>
				<span id="tishiRepwd"></span>
			</p>
			<p>
				邮箱：<input name="email" id="email">
				<span>*</span>
				<span id="tishiEmail"></span>
			</p>
			<p><input type="submit" value="登录" onclick="checkUser()"></p>
		
		</form>
		

	</body>

</html>

错误信息界面
密码提示
密码确认
邮箱格式错误
不同按钮获得不同计算结果，并消除错误信息

Yuyao_Xu
关注
  • 20
    点赞
  • 踩
  • 209
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html怎么验证用户名不为空,JavaScript表单验证实例之验证表单项是否为空
weixin_42365346的博客
06-03 1732
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的，有些验证则非常的复杂，可以说是各种各样给你的要求，不过本章节只介绍一下表单中最简单的验证方式，就是判断是否为空，有些要求比较低的网站对此已经满足需要了。代码如下:js简单表单验证window.onload=function(){var bt=document.getElementById("bt");bt.onclick=function()...
html:简单的登录界面+表单提交/验证
2302_76310478的博客
07-15 771
登录登录
javascript表单验证
12-16
用hbuild进行开发，界面采用css和div进行布局实现tab面板的切换，一个登陆面板和一个注册面板；注册与登陆均使用javascript进行表单验证，验证也使用了jquery，使用了validate插件，采用cookie记录用户信息，可对多用户的注册和登陆进行验证。登陆后的界面可超链接为自己的代码，方便扩展和使用。
html记住用户名密码
09-19
用户登录功能、同时记住用户名密码，通过复选框勾选和不勾选实现记住、清除cookie中用户名密码等。
前端之用html做一个用户登陆界面
最新发布
banliyaoguai的博客
03-12 1312
【代码】前端之用html做一个用户登陆界面。
js实现登录验证
weixin_42610671的博客
01-04 694
为了实现登录验证，你可以在登录表单中包含一个提交按钮，然后在按钮的点击事件的处理函数中进行登录验证。 首先，在处理函数中，你可以获取表单中的用户名和密码的值。然后，你可以使用这些值与你存储的正确的用户名和密码进行比较。如果用户名和密码都正确，则可以认为登录已成功，并将用户重定向到受保护的页面。如果用户名或密码不正确，则可以显示一条错误消息，提示用户输入正确的信息。 这是一个简单的登录验证的例子： ...
html登录表单验证
Hhjian524的博客
02-19 2977
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
Spring Boot + HTML5简单的前端验证登录功能实现
cjbyg的博客
02-19 1559
现在就需要编写服务端的处理方式了，创建如下的文件，impl文件夹用来对前端传来数据进行处理，在该文件夹下创建IUserService的接口和UserServiceImpl类，再创建一个文件夹util用来作为返回前端的结果。首先我们要清楚在数据库中我们需要存放什么内容，一般的登录信息就是账号+密码，再考虑密码加密的问题，一般来说是会用盐+md5进行密码加密，所以我们在数据库的表创建就需要创建账号、密码、盐值这三个实体。布局文件，在css文件夹下创建load的css文件。js文件夹下创建load的js文件。
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
射手座轩木酱的代码天地~
05-13 1万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
html页面实现登录验证码功能（纯前端）
热门推荐
爱学习的大雄的博客
06-13 2万+
html+css+javascript简易实现注册或登录时实现验证码功能：原文链接：https://blog.csdn.net/weixin_41472431/article/details/90732468
html实现简单非空验证和登录验证
weixin_66489187的博客
10-27 2358
实现简单非空验证和登录验证
AJAX入门的简单实例（登录表单验证）
05-27
# 前置知识 HTML、Java、JavaScript、servlet、tomcat 基础知识 # AJAX实例 使用AJAX的 登录表单验证 简单案例 以登录界面为例，首先编写登录页面 login.jsp 如果登录成功，则界面显示登录成功后的页面 如果登录失败，则界面显示登录失败后的页面 在登录时，浏览器窗口不刷新，浏览器地址栏上的地址不变，网页上其他部分的浏览不受影响。
登陆界面表单提交js特效特效代码
03-20
登陆界面表单提交js特效是一款HTML5登录表单验证，表单默认只对输入的长度作验证，你也可以自己修改正则表达式来完成更复杂的表单验证。
登陆界面与后台验证
06-12
这是一个login.html登陆验证界面。jsp与后台数据库验证
EX_UI网络验证登陆界面-易语言
06-12
EX_UI网络验证登陆界面 EX_UI支持库下载地址:http://www.eyuyan.la/post/11750.html
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实现HTML界面设计、布局的方法。 实现各种控件的使用方法。 实现对界面项目进行表单验证的方法。 实现表单标记，表单提交方式、编码方式等知识点。
PHP实现的用户注册表单验证功能简单示例
01-02
本文实例讲述了PHP实现的用户注册表单验证功能。分享给大家供大家参考，具体如下： 注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=...
javascript表单验证和Window详解
12-11
一、表单验证form 1、创建一个新的表单： 代码如下: <form id=”id是唯一的，不可重复” name=“可重复”，method=”post/get”,action=”目标或地址，负责处理的服务端，将文本等传输到什么地方”> //方法1...
HTML/CSS/JS用户注册登陆界面示例（表单验证/验证码生成/敏感词屏蔽/css动画/账号信息储存）
10-30
前端初学者完成的一个用户注册登陆界面的板块，有自动生成随机验证码、基本表单验证、禁止输入违禁词、账号信息录入等基础功能，就当作学习过程中的一个笔记。适用于前端新手，部分地方不够完善。
htnl+js的实现登录界面进行表单验证
06-12
好的，下面是一个简单的 HTML+JavaScript 实现登录界面进行表单验证的例子： ```html <!DOCTYPE html> <html> <head> <title>登录</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> form { display: flex; flex-direction: column; align-items: center; } input { margin: 10px; padding: 8px; border-radius: 5px; border: 1px solid #ddd; } button { margin: 10px; padding: 8px; border-radius: 5px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <form> <label>用户名:</label> <input type="text" id="username"> <label>密码:</label> <input type="password" id="password"> <button type="button" onclick="login()">登录</button> </form> <script> function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username === "" || password === "") { alert("用户名和密码不能为空！"); return; } // 进行登录操作... // 这里可以使用 Ajax 发送请求到后台进行验证，或者直接跳转到登录成功页面等等 } </script> </body> </html> ``` 在这个例子中，我们使用了一个 `<form>` 表单来包含用户名和密码的输入框，以及一个登录按钮。当用户点击登录按钮时，会调用 `login()` 函数进行表单验证。 在 `login()` 函数中，我们首先通过 `document.getElementById()` 方法获取到用户名和密码的值。然后判断这两个值是否为空，如果为空，则弹出一个提示框，告诉用户用户名和密码不能为空。如果不为空，则可以进行登录操作，比如使用 Ajax 发送请求到后台进行验证，或者直接跳转到登录成功页面等等。 这只是一个简单的例子，实际应用中，我们还需要进行更加复杂的表单验证，比如验证用户名和密码的格式是否符合要求，防止 XSS 攻击和 SQL 注入等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值